@ljwei-stak/dsh-model-route-bot 0.66.4 → 0.67.0

package/apps/integration-client/chat-design.mjs

@@ -0,0 +1,250 @@
+// The chat surface's display model: the numbers the design commits to, plus the
+// checks that read them back out of chat.css. chat.css stays the single source of
+// truth for colour values; this module holds the rules those values must satisfy,
+// so a palette edit that drops below AA fails a test instead of a person's eyes.
+//
+// Nothing here touches the DOM: the node test runs it directly, and the browser
+// verification script imports the same rules so both report one verdict.
+
+/** WCAG 2.1 relative luminance of an sRGB colour. */
+export function luminance(color) {
+  const channels = channelsOf(color)
+  return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722
+}
+
+/** WCAG 2.1 contrast ratio, 1:1 through 21:1. */
+export function contrastRatio(a, b) {
+  const first = luminance(a), second = luminance(b)
+  return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05)
+}
+
+/** The design's own numbers. Every value is one a reader can argue with. */
+export const CHAT_DESIGN = Object.freeze({
+  /** Body copy is 14px and up, so the bar is the normal-text 4.5:1. */
+  bodyMinContrast: 4.5,
+  /** Focus rings, hairlines and control borders: WCAG 1.4.11 wants 3:1. */
+  uiMinContrast: 3,
+  /** Pointer targets stay legible and tappable without becoming furniture. */
+  minTouchTarget: 24,
+  coarseTouchTarget: 40,
+  menuRowHeight: 36,
+  focusRingWidth: 2,
+  focusRingOffset: 2,
+  /** A bubble never takes the whole column: the reply keeps a readable measure. */
+  bubbleShare: 0.78,
+  /** The narrow layout has to hold on the smallest phone we support. */
+  narrowViewport: 375,
+  wideViewport: 1360,
+  /** Radius ladder, from the composer card down to a badge. */
+  radius: Object.freeze({ card: 20, bubble: 16, control: 10, menu: 12, badge: 6 }),
+})
+
+// Token pairs the palette must clear, per mode. `on` is what the ink sits on;
+// the minimum comes from CHAT_DESIGN. A pair only exists when both tokens are
+// declared, so adding a surface never breaks an older mode.
+const TEXT_PAIRS = [
+  ['--bp-chat-ink', '--bp-chat-canvas'],
+  ['--bp-chat-ink', '--bp-chat-surface'],
+  ['--bp-chat-ink', '--bp-chat-sidebar'],
+  ['--bp-chat-ink', '--bp-chat-inset'],
+  ['--bp-chat-muted', '--bp-chat-surface'],
+  ['--bp-chat-muted', '--bp-chat-canvas'],
+  ['--bp-chat-muted', '--bp-chat-sidebar'],
+  ['--bp-chat-muted', '--bp-chat-inset'],
+  ['--bp-chat-on-user', '--bp-chat-user'],
+  ['--bp-chat-danger', '--bp-chat-surface'],
+  ['--bp-chat-danger', '--bp-chat-canvas'],
+  ['--bp-chat-danger', '--bp-chat-danger-bg'],
+  ['--bp-chat-warning', '--bp-chat-warning-bg'],
+  ['--bp-chat-on-accent', '--bp-chat-accent'],
+]
+const UI_PAIRS = [
+  ['--bp-chat-accent', '--bp-chat-surface'],
+  ['--bp-chat-accent', '--bp-chat-canvas'],
+  ['--bp-chat-accent', '--bp-chat-sidebar'],
+  ['--bp-chat-focus', '--bp-chat-surface'],
+  ['--bp-chat-focus', '--bp-chat-canvas'],
+]
+// A hairline is decoration, not a control boundary: WCAG 1.4.11 does not reach it.
+// It still has to be visible, so the floor is a line you can see on its surface.
+const HAIRLINE_MIN = 1.2
+const HAIRLINE_PAIRS = [
+  ['--bp-chat-line', '--bp-chat-surface'],
+  ['--bp-chat-line', '--bp-chat-canvas'],
+  ['--bp-chat-line', '--bp-chat-sidebar'],
+]
+
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+
+function channelsOf(color) {
+  const value = String(color).trim()
+  if (HEX.test(value)) {
+    const digits = value.slice(1)
+    const wide = digits.length <= 4 ? [...digits].map(digit => digit + digit) : [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4, 6)]
+    return wide.slice(0, 3).map(pair => parseInt(pair, 16) / 255).map(channel => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4)
+  }
+  const numbers = value.match(/-?\d*\.?\d+/g)
+  if (!numbers) throw new Error(`chat design: cannot read a colour out of ${value}`)
+  return numbers.slice(0, 3).map(Number).map(channel => channel / 255).map(channel => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4)
+}
+
+/** Splits CSS text into `{ selectors, declarations, atRule }` blocks, nested ones included. */
+export function cssBlocks(text) {
+  const blocks = []
+  const walk = (start, end, atRule) => {
+    let cursor = start
+    while (cursor < end) {
+      const open = text.indexOf('{', cursor)
+      if (open < 0 || open >= end) break
+      const close = matchBrace(text, open, end)
+      // The prelude carries the comments that sat between this rule and the last one.
+      const prelude = text.slice(cursor, open).replace(/\/\*[\s\S]*?\*\//g, '').trim()
+      if (prelude.startsWith('@keyframes')) { cursor = close + 1; continue }
+      if (prelude.startsWith('@')) walk(open + 1, close, prelude)
+      else if (prelude) {
+        blocks.push({ selectors: prelude, body: text.slice(open + 1, close), atRule })
+        walk(open + 1, close, atRule)
+      }
+      cursor = close + 1
+    }
+  }
+  walk(0, text.length, null)
+  return blocks
+}
+
+function matchBrace(text, open, end) {
+  let depth = 0
+  for (let at = open; at < end; at += 1) {
+    if (text[at] === '{') depth += 1
+    else if (text[at] === '}') { depth -= 1; if (depth === 0) return at }
+  }
+  throw new Error('chat design: unbalanced braces in the chat stylesheet')
+}
+
+function declarationsOf(body) {
+  const found = new Map()
+  for (const statement of body.split(';')) {
+    const at = statement.indexOf(':')
+    if (at < 0) continue
+    const name = statement.slice(0, at).trim()
+    const value = statement.slice(at + 1).trim()
+    if (name.startsWith('--')) found.set(name, value)
+  }
+  return found
+}
+
+/** A selector list split on its top-level commas, so `:not([a=x])` stays one selector. */
+export function selectorList(selectors) {
+  const list = []
+  let depth = 0, start = 0
+  for (let at = 0; at < selectors.length; at += 1) {
+    const character = selectors[at]
+    if (character === '(') depth += 1
+    else if (character === ')') depth -= 1
+    else if (character === ',' && depth === 0) { list.push(selectors.slice(start, at).trim()); start = at + 1 }
+  }
+  list.push(selectors.slice(start).trim())
+  return list.filter(Boolean)
+}
+
+/**
+ * A selector with its guards taken out. `:not([data-bp-appearance=light])` is a
+ * condition on when the rule applies, never an appearance of its own, so reading
+ * the raw text would file a dark rule under the light one.
+ */
+function withoutGuards(selector) {
+  let text = selector
+  for (let guard = /:(?:not|has|is|where|matches)\(([^()]*)\)/; guard.test(text);) text = text.replace(guard, '')
+  return text
+}
+
+const isDarkSelector = selector => /data-ds-dark-theme|data-bp-appearance=dark/.test(withoutGuards(selector))
+const isLightSelector = selector => /data-bp-appearance=light/.test(withoutGuards(selector))
+
+/** Which appearance a rule paints: `dark`, `light` or `default` (the light values). */
+export function ruleMode(selectors) {
+  const list = selectorList(selectors)
+  if (list.some(isDarkSelector)) return 'dark'
+  if (list.some(isLightSelector)) return 'light'
+  return 'default'
+}
+
+/**
+ * The `--bp-chat-*` tokens chat.css declares, per mode. The dark mode inherits
+ * anything the light mode declares and it does not, which is what the stylesheet
+ * itself does, so a missing dark token is a real gap rather than a parse artifact.
+ */
+export function chatTokens(css) {
+  const light = new Map(), dark = new Map()
+  for (const block of cssBlocks(css)) {
+    if (block.atRule || !/data-bot-product-ui/.test(block.selectors)) continue
+    const declarations = declarationsOf(block.body)
+    const names = [...declarations.keys()].filter(name => name.startsWith('--bp-chat-'))
+    if (!names.length) continue
+    // One selector list can paint both appearances at once (the default block names
+    // the dark theme as one of its selectors), so each selector is read on its own.
+    const targets = new Map()
+    for (const selector of selectorList(block.selectors)) {
+      const modes = isDarkSelector(selector) ? ['dark'] : isLightSelector(selector) ? ['light'] : ['light', 'dark']
+      for (const mode of modes) targets.set(mode, mode === 'dark' ? dark : light)
+    }
+    for (const [name, value] of declarations) for (const target of targets.values()) if (targets.size) target.set(name, value)
+  }
+  for (const [name, value] of light) if (!dark.has(name)) dark.set(name, value)
+  return { light, dark }
+}
+
+/**
+ * Every contrast pair the palette declares, with the ratio it actually reaches.
+ * `minimum` is 4.5:1 for text and 3:1 for rings and borders.
+ */
+export function chatContrast(css) {
+  const tokens = chatTokens(css)
+  const rows = []
+  for (const [mode, values] of [['light', tokens.light], ['dark', tokens.dark]]) {
+    for (const [ink, on] of TEXT_PAIRS) {
+      if (!values.has(ink) || !values.has(on)) continue
+      rows.push({ mode, ink, on, ratio: contrastRatio(values.get(ink), values.get(on)), minimum: CHAT_DESIGN.bodyMinContrast, kind: 'text' })
+    }
+    for (const [ink, on] of UI_PAIRS) {
+      if (!values.has(ink) || !values.has(on)) continue
+      rows.push({ mode, ink, on, ratio: contrastRatio(values.get(ink), values.get(on)), minimum: CHAT_DESIGN.uiMinContrast, kind: 'ui' })
+    }
+    for (const [ink, on] of HAIRLINE_PAIRS) {
+      if (!values.has(ink) || !values.has(on)) continue
+      rows.push({ mode, ink, on, ratio: contrastRatio(values.get(ink), values.get(on)), minimum: HAIRLINE_MIN, kind: 'hairline' })
+    }
+  }
+  return rows
+}
+
+/** The pairs that fall short, as readable lines. */
+export function chatViolations(css) {
+  return chatContrast(css)
+    .filter(row => row.ratio < row.minimum)
+    .map(row => `${row.mode}: ${row.ink} on ${row.on} is ${row.ratio.toFixed(2)}:1, under ${row.minimum}:1`)
+}
+
+/**
+ * Tokens the dark block has to name for itself. A dark appearance that simply
+ * inherits a light token still parses and still computes — it just reads wrong on
+ * a dark canvas (a hairline that disappears, a border that turns to mud), which is
+ * exactly the kind of regression a contrast check on the inherited value misses.
+ */
+export function darkTokenGaps(css) {
+  const lightNames = new Set(), darkNames = new Set()
+  for (const block of cssBlocks(css)) {
+    if (block.atRule || !/data-bot-product-ui/.test(block.selectors)) continue
+    const selectors = selectorList(block.selectors)
+    const darkOnly = selectors.length > 0 && selectors.every(isDarkSelector)
+    const names = [...declarationsOf(block.body).keys()].filter(name => name.startsWith('--bp-chat-'))
+    for (const name of names) (darkOnly ? darkNames : lightNames).add(name)
+  }
+  return [...lightNames].filter(name => !darkNames.has(name)).map(name => `${name} has no dark declaration`)
+}
+
+/** Both modes must name the same tokens, or one appearance silently loses a surface. */
+export function tokenGaps(css) {
+  const { light, dark } = chatTokens(css)
+  return [...light.keys()].filter(name => !dark.has(name)).map(name => `${name} has no dark value`)
+}

package/apps/integration-client/chat-ui.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { UiIcon } from './ui-icons.jsx'
+import { AppearanceControls } from './workspace-ui.jsx'
+import { BotSettingsDialog } from './bot-settings-dialog.jsx'
+import { botModelStatus } from './bot-model-status.mjs'
+import { BotThreadHeader } from './bot-thread-header.jsx'
+import { NativeActivityHeader } from './native-activity.jsx'
+import { IndependentChatEntry } from './independent-chat-entry.jsx'
+
+let threadHeaderScope = 0
+
+const idOf = value => typeof value === 'string' && value.length > 0 ? value : null
+const resources = Object.freeze([
+  { section: 'notifications', label: '通知中心', icon: 'bell' },
+  { section: 'bindings', label: 'Bot 团队', icon: 'team' },
+  { section: 'machines', label: '远程电脑', icon: 'computer' },
+  { section: 'library', label: '资料库', icon: 'folder' },
+  { section: 'data', label: '数据与图表', icon: 'chart' },
+  { section: 'routine', label: '例行工作', icon: 'repeat' },
+  { section: 'usage', label: '费用与用量', icon: 'chart' },
+])
+
+function useUiAction(identity) {
+  const [feedback, setFeedback] = useState(null)
+  const current = useRef({ identity, epoch: 0, token: 0, mounted: false, pending: false })
+  if (current.current.identity !== identity) {
+    current.current.identity = identity
+    current.current.epoch += 1
+    current.current.pending = false
+  }
+  useEffect(() => {
+    current.current.mounted = true
+    return () => {
+      current.current.mounted = false
+      current.current.epoch += 1
+      current.current.pending = false
+    }
+  }, [])
+  const run = (label, action) => {
+    const state = current.current
+    if (!state.mounted || state.pending) return
+    const epoch = state.epoch, token = ++state.token
+    state.pending = true
+    setFeedback({ identity, pending: label, error: '' })
+    const finish = (error, failed = false) => {
+      if (!state.mounted || state.identity !== identity || state.epoch !== epoch || state.token !== token) return
+      state.pending = false
+      setFeedback({ identity, pending: '', error: failed ? `${label}失败：${error?.message ?? String(error ?? '未知错误')}` : '' })
+    }
+    try { Promise.resolve(action()).then(() => finish(), error => finish(error, true)) }
+    catch (error) { finish(error, true) }
+  }
+  return {
+    run,
+    pending: feedback?.identity === identity && Boolean(feedback.pending),
+    error: feedback?.identity === identity ? feedback.error : '',
+    dismiss: () => setFeedback(null),
+  }
+}
+
+function ActionError({ error, onDismiss, className = '' }) {
+  if (!error) return null
+  return <div className={`bp-chat-action-error ${className}`} role="alert"><span>{error}</span><button type="button" aria-label="关闭错误提示" onClick={onDismiss}><UiIcon name="close" size={14} /></button></div>
+}
+
+function closeDetailsOnEscape(event) {
+  if (event.key !== 'Escape' || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return
+  const details = event.target.closest?.('details[open]')
+  if (!details || !event.currentTarget.contains(details)) return
+  event.preventDefault()
+  event.stopPropagation()
+  details.open = false
+  details.querySelector('summary')?.focus()
+}
+
+/** Supporting navigation below the native Bot contact list. Destinations only change UI focus. */
+export function ContactNavigation({ onNavigate, onOpenAdvanced, compact = false, activeSection, attentionCount, attentionPartial = false, attentionKnown = true, notificationCount = 0, notificationPartial = false, notificationKnown = false }) {
+  const [announcedSection, setAnnouncedSection] = useState(null)
+  const menu = useRef(null)
+  const action = useUiAction('contact-navigation')
+  useEffect(() => {
+    const change = event => {
+      const id = event.detail?.id
+      setAnnouncedSection(typeof id === 'string' && id.startsWith('bot-product-') ? id.slice('bot-product-'.length) : id === 'model-router-galgame' ? 'advanced' : null)
+    }
+    document.addEventListener('bot-product:navigation', change)
+    return () => document.removeEventListener('bot-product:navigation', change)
+  }, [])
+  const active = activeSection === undefined ? announcedSection : activeSection
+  const count = Number.isFinite(attentionCount) && attentionCount > 0 ? Math.floor(attentionCount) : 0
+  const attentionLabel = !attentionKnown ? '任务待办，状态尚未更新' : count ? `任务待办，${attentionPartial ? '至少 ' : ''}${count} 项需要处理${attentionPartial ? '，仅统计已加载任务' : ''}` : '任务待办'
+  const unread = notificationKnown && Number.isSafeInteger(notificationCount) && notificationCount > 0 ? notificationCount : 0
+  const unreadLabel = unread ? `${notificationPartial ? '至少 ' : ''}${unread} 条未读通知` : notificationKnown && notificationPartial ? '较早通知的未读状态尚未完整统计' : ''
+  const navigate = section => {
+    if (typeof onNavigate !== 'function') return
+    if (menu.current) menu.current.open = false
+    action.run('打开页面', () => onNavigate({ section }))
+  }
+  return <nav className={`bp-contact-nav${compact ? ' bp-contact-nav-compact' : ''}`} aria-label="聊天辅助导航" onKeyDown={closeDetailsOnEscape}>
+    <div className="bp-contact-nav-row">
+      {typeof onNavigate === 'function' && <>
+        <button type="button" className="bp-contact-nav-button" data-contact-nav="inbox" title={attentionLabel} aria-label={attentionLabel} aria-current={active === 'inbox' || active === 'tasks' ? 'page' : undefined} disabled={action.pending} onClick={() => navigate('inbox')}><UiIcon name="inbox" size={17} /><span className="bp-contact-nav-label">待办</span>{count > 0 && <span className="bp-contact-attention" aria-hidden="true">{count > 99 ? '99+' : `${count}${attentionPartial ? '+' : ''}`}</span>}</button>
+        <button type="button" className="bp-contact-nav-button" data-contact-nav="home" title="工作空间" aria-label="工作空间" aria-current={active === 'home' ? 'page' : undefined} disabled={action.pending} onClick={() => navigate('home')}><UiIcon name="home" size={17} /><span className="bp-contact-nav-label">总览</span></button>
+        <details ref={menu} className="bp-contact-resources"><summary title={`资源与管理${unreadLabel ? `，${unreadLabel}` : ''}`} aria-label={`资源与管理${unreadLabel ? `，${unreadLabel}` : ''}`} data-active={resources.some(row => row.section === active) || active === 'advanced' ? '' : undefined}><UiIcon name="folder" size={17} /><span className="bp-contact-nav-label">资源</span>{unreadLabel && <span className="bp-contact-unread-dot" aria-hidden="true" />}</summary><div className="bp-contact-resources-menu" role="group" aria-label="资源与管理">
+          {resources.map(({ section, label, icon }) => <button type="button" key={section} aria-label={section === 'notifications' && unreadLabel ? `${label}，${unreadLabel}` : undefined} aria-current={active === section ? 'page' : undefined} disabled={action.pending} onClick={() => navigate(section)}><UiIcon name={icon} size={17} /><span>{label}</span>{section === 'notifications' && unread > 0 ? <small className="bp-contact-unread-count">{unread > 99 ? '99+' : `${unread}${notificationPartial ? '+' : ''}`}</small> : <UiIcon name="chevron" size={12} />}</button>)}
+          {typeof onOpenAdvanced === 'function' && <button type="button" className="bp-contact-advanced" aria-current={active === 'advanced' ? 'page' : undefined} disabled={action.pending} onClick={() => {
+            if (menu.current) menu.current.open = false
+            action.run('打开高级工作台', () => onOpenAdvanced())
+          }}><UiIcon name="settings" size={17} /><span>高级工作台</span><UiIcon name="chevron" size={12} /></button>}
+        </div></details>
+      </>}
+      <AppearanceControls />
+    </div>
+    <ActionError error={action.error} onDismiss={action.dismiss} />
+  </nav>
+}
+
+/** Optional replacement for the sidebar's native search/new controls, using their existing dialogs. */
+export function ContactToolbar({ actions, compact = false }) {
+  const action = useUiAction('contact-toolbar')
+  const search = actions?.openPalette, create = actions?.openNewChat
+  return <div className={`bp-contact-toolbar${compact ? ' bp-contact-toolbar-compact' : ''}`}>
+    {!compact && <strong>Bot 伙伴</strong>}
+    <div className="bp-contact-toolbar-actions">
+      {typeof search === 'function' && <button type="button" title="搜索聊天" aria-label="搜索聊天" disabled={action.pending} onClick={() => action.run('打开聊天搜索', () => search(''))}><UiIcon name="search" size={18} /></button>}
+      {typeof create === 'function' && <button type="button" title="新建聊天" aria-label="新建聊天" disabled={action.pending} onClick={() => action.run('打开新建聊天', () => create('new'))}><UiIcon name="plus" size={19} /></button>}
+    </div>
+    <ActionError error={action.error} onDismiss={action.dismiss} />
+  </div>
+}
+
+/** Addon for HeaderPill. Native details/model/desktop/voice views retain ownership of their workflows. */
+export function ConversationTools({ sessionId, bot, room, roster, actions, running = false, onNavigate, productApi, onOpenTools, onOpenSession, onOpenIndependentChat }) {
+  const session = idOf(sessionId), botId = idOf(bot?.id), roomId = idOf(room?.id)
+  const isBot = botId !== null && !room, isRoom = roomId !== null && !bot
+  const ownerId = isBot ? botId : isRoom ? roomId : null
+  const identity = JSON.stringify([session, isBot ? botId : null, isRoom ? roomId : null])
+  const action = useUiAction(identity)
+  const threadKey = useMemo(() => ++threadHeaderScope, [session, productApi])
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  useEffect(() => { setSettingsOpen(false) }, [identity, productApi])
+  const overflow = useRef(null)
+  const details = actions?.showDetails, memory = actions?.openMemory, voice = actions?.openVoice
+  if (!session || !ownerId) return null
+  const name = (isBot ? bot.name : room.name) || (isBot ? 'Bot' : '群聊')
+  const modelState = botModelStatus(isBot ? bot : null, roster?.models)
+  const modelName = modelState.label
+  const members = isRoom && Array.isArray(room.members) ? room.members.length : null
+  const canDetails = typeof details === 'function'
+  const buttons = [
+    ...(typeof onNavigate === 'function' ? [{ key: 'library', label: isBot ? `${name} 的资料` : '团队资料库', short: '资料库', icon: 'folder', run: () => onNavigate({ section: 'library', ...(isBot ? { botId } : {}) }) }] : []),
+    ...(isBot && typeof onNavigate === 'function' ? [{ key: 'data', label: `${name} 的数据与图表`, short: '数据', icon: 'chart', run: () => onNavigate({ section: 'data', botId }) }] : []),
+    ...(typeof memory === 'function' && roster?.memory !== false ? [{ key: 'memory', label: isBot ? `${name} 的记忆` : `${name} 的群聊记忆`, short: '记忆', icon: 'memory', run: () => memory(ownerId) }] : []),
+    ...(typeof onNavigate === 'function' ? [{ key: 'tasks', label: isBot ? `${name} 的任务` : '团队任务', short: '任务', icon: 'tasks', run: () => onNavigate({ section: 'tasks', ...(isBot ? { botId } : {}) }) }] : []),
+    ...(isBot && typeof voice === 'function' ? [{ key: 'voice', label: `和 ${name} 语音聊天`, short: '语音聊天', icon: 'voice', run: () => voice(session) }] : []),
+  ]
+  if (!canDetails && !buttons.length && !running) return null
+  const activate = row => {
+    if (overflow.current) overflow.current.open = false
+    action.run(`打开${row.short}`, row.run)
+  }
+  const shortcut = (row, menu = false) => <button type="button" key={row.key} data-chat-command={row.key} aria-label={row.label} title={row.label} disabled={action.pending} onClick={() => activate(row)}><UiIcon name={row.icon} size={17} />{menu && <span>{row.short}</span>}</button>
+  return <div className="bp-conversation-tools" data-conversation-kind={isBot ? 'bot' : 'room'} data-running={running ? '' : undefined} data-bot-id={isBot ? botId : undefined} data-room-id={isRoom ? roomId : undefined} role="group" aria-label={`${name} 的聊天工具`} onKeyDown={closeDetailsOnEscape}>
+    {isBot && typeof onOpenIndependentChat === 'function' && <IndependentChatEntry productApi={productApi} botId={botId} onOpen={onOpenIndependentChat}/>}
+    {isBot && typeof productApi?.dispatch === 'function' && <BotThreadHeader key={threadKey} sessionId={session} roster={roster} productApi={productApi} actions={actions} onOpenSession={onOpenSession} onOpenPanel={typeof onNavigate === 'function' ? () => onNavigate({ section: 'threads', botId }) : undefined}/>}
+    {canDetails && (isBot ? <button type="button" className="bp-conversation-model" data-chat-command="model" data-model-different={modelState.different ? '' : undefined} aria-label={`${name} 的模型：${modelName}，${modelState.title}，打开模型与官方工具设置`} title={`${modelState.title} · 模型与官方工具`} disabled={action.pending} onClick={() => action.run('打开模型设置', () => typeof productApi?.dispatch === 'function' ? setSettingsOpen(true) : typeof onNavigate === 'function' ? onNavigate({ section: 'bindings', botId, compose: true }) : details(session, 'details'))}><UiIcon name="spark" size={15} /><span className="bp-conversation-model-name">{modelName}</span>{modelState.different && <span className="bp-conversation-model-different" aria-hidden="true"/>}<UiIcon name="chevron" size={11} /></button>
+      : <button type="button" className="bp-conversation-members" data-chat-command="members" aria-label={`查看 ${name} 的群聊详情`} title="群聊详情" disabled={action.pending} onClick={() => action.run('打开群聊详情', () => details(session, 'details'))}><UiIcon name="team" size={16} /><span>{members === null ? '群聊详情' : `${members} 位成员`}</span></button>)}
+    {isBot && <NativeActivityHeader key={`native-activity-${session}-${botId}`} productApi={productApi} botId={botId} sessionId={session}/>}
+    {running && <span className="bp-conversation-live" role="status" aria-label="正在处理" title="正在处理"><span aria-hidden="true" /></span>}
+    {isBot && canDetails && <button type="button" className="bp-conversation-computer" data-chat-command="desktop" aria-label={`查看 ${name} 的电脑`} title="电脑与桌面" disabled={action.pending} onClick={() => action.run('打开电脑', () => details(session, 'desktop'))}><UiIcon name="computer" size={18} /></button>}
+    {buttons.length > 0 && <><div className="bp-conversation-shortcuts">{buttons.map(row => shortcut(row))}</div><details ref={overflow} className="bp-conversation-overflow"><summary title="更多聊天工具" aria-label="更多聊天工具"><UiIcon name="settings" size={18} /></summary><div className="bp-conversation-menu" role="group" aria-label="更多聊天工具">{buttons.map(row => shortcut(row, true))}</div></details></>}
+    <ActionError error={action.error} onDismiss={action.dismiss} />
+    {settingsOpen && isBot && <BotSettingsDialog productApi={productApi} botId={botId} onClose={() => setSettingsOpen(false)} onOpenTools={typeof onOpenTools === 'function' ? async () => { await onOpenTools(); setSettingsOpen(false) } : undefined}/>}
+  </div>
+}