@roaming-ai/dsh-group-chat 0.2.2 → 0.3.1

package/src/client/components/Composer.tsx

@@ -6,9 +6,13 @@
 import type { ReactNode, KeyboardEvent as ReactKeyboardEvent, ClipboardEvent as ReactClipboardEvent, DragEvent as ReactDragEvent } from 'react'
 import { Icon, P } from '../lib/ui.ts'
 import { PermissionSelect } from './PermissionSelect.tsx'
+import { HoverTip } from './HoverTip.tsx'
 import { escapeRegExp, type ClientSnapshot, type SnapshotRole } from '../lib/model.ts'
 import type { AtToken } from '../../shared/file-mention-grammar.ts'
 
+/** 轮数控件 hover：宿主 Tooltip 三行说明（pre-line）。 */
+const ROUNDS_HINT = '一轮 = 参与角色各说一次。\n要他们自己互相反驳、你不插话时再加轮。\n要边看边插话，就留 1，再点发送。'
+
 interface ComposerProps {
   snap: ClientSnapshot
   sess: ClientSnapshot['sessions'][number] | null
@@ -102,23 +106,25 @@ export function Composer(props: ComposerProps): ReactNode {
       {err ? <div className="dsgc-err">{err}</div> : null}
       <div className="dsgc-parts">
         <span className="dsgc-partslabel">参与角色</span>
-        {mentionedRoles.length
-          ? <span className="dsgc-partslabel">已 @ {mentionedRoles.map((r) => r.name).join('、')}（本轮仅被点名成员发言）</span>
-          : enabledRoles.length
-            ? enabledRoles.map((r) => (
-              <button
-                key={r.id}
-                type="button"
-                className={'dsgc-partchip' + (participants.includes(r.id) ? ' on' : '')}
-                onClick={() => togglePart(r.id)}
-                disabled={busyNow}
-                title={busyNow ? '对话进行中，暂停调整' : '点击切换本轮是否参与'}
-              >
-                <span className="dsgc-chipdot" style={{ background: r.color || '#888' }} />
-                {r.name}
-              </button>
-              ))
-            : <span className="dsgc-hint">还没有启用的角色，请在右侧添加</span>}
+        <div className="dsgc-partlist">
+          {mentionedRoles.length
+            ? <span className="dsgc-partslabel">已 @ {mentionedRoles.map((r) => r.name).join('、')}（本轮仅被点名成员发言）</span>
+            : enabledRoles.length
+              ? enabledRoles.map((r) => (
+                <button
+                  key={r.id}
+                  type="button"
+                  className={'dsgc-partchip' + (participants.includes(r.id) ? ' on' : '')}
+                  onClick={() => togglePart(r.id)}
+                  disabled={busyNow}
+                  title={busyNow ? '对话进行中，暂停调整' : '点击切换本轮是否参与'}
+                >
+                  <span className="dsgc-chipdot" style={{ background: r.color || '#888' }} />
+                  {r.name}
+                </button>
+                ))
+              : <span className="dsgc-hint">还没有启用的角色，请在右侧添加</span>}
+        </div>
       </div>
       <div className="dsgc-card">
         <div className="dsgc-mentionwrap">
@@ -210,16 +216,16 @@ export function Composer(props: ComposerProps): ReactNode {
             onSelect={(tier) => { void mutate({ op: 'setPermissionTier', groupId: group.id, tier }) }}
           />
           <span style={{ flex: 1 }} />
-          <div className="dsgc-rounds" title="自由讨论的轮数（1–10）：一轮 = 全体参与角色按顺序各发言一次">
+          <HoverTip label={ROUNDS_HINT} side="top" delayMs={500} maxWidth={280} className="dsgc-rounds">
             <button type="button" className="dsgc-roundbtn" aria-label="减少轮数" disabled={rounds <= 1} onClick={() => { setRounds(Math.max(1, rounds - 1)) }}>
               {Icon(P.IconChevronLeftOutline14, 12)}
             </button>
-            <span className="dsgc-roundnum" title="轮数">{rounds}</span>
+            <span className="dsgc-roundnum">{rounds}</span>
             <button type="button" className="dsgc-roundbtn" aria-label="增加轮数" disabled={rounds >= 10} onClick={() => { setRounds(Math.min(10, rounds + 1)) }}>
               {Icon(P.IconChevronRightOutline14, 12)}
             </button>
             <span style={{ padding: '0 6px 0 2px' }}>轮</span>
-          </div>
+          </HoverTip>
           {busyNow
             ? (
               <P.Button variant="outline" className="dsgc-stopbtn" onClick={() => { void stopRun() }}>

package/src/client/components/ConstraintList.tsx

@@ -0,0 +1,64 @@
+/**
+ * 会话流折点处：只读结论备忘卡（超过 4 条默认露 3 条）。
+ * @module dsh-group-chat/client/components
+ */
+
+import { useState, type ReactNode } from 'react'
+import type { SessionConstraint } from '../../core/types.ts'
+import { KIND_LABEL } from '../../core/constraints.ts'
+import { ClipWell, Fold } from './Fold.tsx'
+
+interface ConstraintListProps {
+  items: SessionConstraint[]
+}
+
+function ConstraintRow(props: { item: SessionConstraint }): ReactNode {
+  const { item } = props
+  return (
+    <div className="dsgc-constraint">
+      <span className={'dsgc-ckind ' + item.kind}>{KIND_LABEL[item.kind]}</span>
+      <span className="dsgc-ctext">{item.text}</span>
+    </div>
+  )
+}
+
+export function ConstraintList(props: ConstraintListProps): ReactNode {
+  const { items } = props
+  const [open, setOpen] = useState(false)
+  if (!items.length) return null
+  const overflow = items.length > 4
+  const head = overflow ? items.slice(0, 3) : items
+  const extra = overflow ? items.slice(3) : []
+  const rest = items.length - 3
+
+  return (
+    <section className="dsgc-constraints" aria-labelledby="dsgc-constraints-title">
+      <div className="dsgc-chead">
+        <h2 id="dsgc-constraints-title" className="dsgc-ctitle">结论备忘</h2>
+        <p className="dsgc-cdesc">窗口外消息折成的已定 / 否决 / 未决，供后续角色接着用。</p>
+      </div>
+      <ClipWell maxHeight={160} className="dsgc-clist" watch={open}>
+        {head.map((c, i) => <ConstraintRow key={i} item={c} />)}
+        {overflow
+          ? (
+            <Fold open={open}>
+              {extra.map((c, i) => <ConstraintRow key={i + 3} item={c} />)}
+            </Fold>
+            )
+          : null}
+      </ClipWell>
+      {overflow
+        ? (
+          <button
+            type="button"
+            className="dsgc-cmore"
+            onClick={() => { setOpen(!open) }}
+            aria-expanded={open}
+          >
+            {open ? '收起' : '还有 ' + rest + ' 条约束'}
+          </button>
+          )
+        : null}
+    </section>
+  )
+}

package/src/client/components/FailCard.tsx

@@ -0,0 +1,49 @@
+/**
+ * 角色发言失败卡：人话标题 + 可展开原文。操作条由 Bubble 放在气泡外下方。
+ * @module dsh-group-chat/client/FailCard
+ */
+
+import { useState, type ReactNode } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import { classifySpeakFailure } from '../../core/errors.ts'
+import { ClipWell, Fold } from './Fold.tsx'
+
+export interface FailCardProps {
+  raw: string
+}
+
+export function FailCard(props: FailCardProps): ReactNode {
+  const view = classifySpeakFailure(props.raw)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="dsgc-fail">
+      <div className="dsgc-failhead">
+        <span className="dsgc-failicon" aria-hidden="true">{Icon(P.IconWarningOutline16, 14)}</span>
+        <div className="dsgc-failcopy">
+          <div className="dsgc-failtitle">{view.title}</div>
+          {view.detail ? <div className="dsgc-faildetail">{view.detail}</div> : null}
+        </div>
+      </div>
+      {view.raw
+        ? (
+          <>
+            <button
+              type="button"
+              className={'dsgc-failmore' + (open ? ' open' : '')}
+              aria-expanded={open}
+              onClick={() => { setOpen((v) => !v) }}
+            >
+              {open ? '收起原始错误' : '查看原始错误'}
+            </button>
+            <Fold open={open}>
+              <ClipWell maxHeight={220} watch={open}>
+                <pre className="dsgc-failraw">{view.raw}</pre>
+              </ClipWell>
+            </Fold>
+          </>
+          )
+        : null}
+    </div>
+  )
+}

package/src/client/components/Fold.tsx

@@ -0,0 +1,72 @@
+/**
+ * 会话内折叠：高度 0fr→1fr + 溢出滚动遮罩。思考 / 工具 / 失败原文 / 结论备忘共用。
+ * @module dsh-group-chat/client/components
+ */
+
+import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+
+interface FoldProps {
+  open: boolean
+  children: ReactNode
+  className?: string
+}
+
+export function Fold(props: FoldProps): ReactNode {
+  const { open, children, className } = props
+  return (
+    <div className={'dsgc-fold' + (open ? ' open' : '') + (className ? ' ' + className : '')}>
+      <div className="dsgc-fold-inner">{children}</div>
+    </div>
+  )
+}
+
+interface ClipWellProps {
+  children: ReactNode
+  maxHeight: number
+  className?: string
+  watch?: unknown
+}
+
+export function ClipWell(props: ClipWellProps): ReactNode {
+  const { children, maxHeight, className, watch } = props
+  const [clip, setClip] = useState({ up: false, down: false })
+  const ref = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const measure = (): void => {
+      if (el.clientHeight < 2) {
+        setClip((cur) => cur.up || cur.down ? { up: false, down: false } : cur)
+        return
+      }
+      const max = el.scrollHeight - el.clientHeight
+      const up = el.scrollTop > 1
+      const down = max > 1 && el.scrollTop < max - 1
+      setClip((cur) => cur.up === up && cur.down === down ? cur : { up, down })
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    for (const child of el.children) ro.observe(child)
+    el.addEventListener('scroll', measure, { passive: true })
+    el.addEventListener('transitionend', measure)
+    return () => {
+      ro.disconnect()
+      el.removeEventListener('scroll', measure)
+      el.removeEventListener('transitionend', measure)
+    }
+  }, [watch])
+
+  return (
+    <div className={'dsgc-clip' + (clip.up ? ' can-up' : '') + (clip.down ? ' can-down' : '')}>
+      <div
+        className={'dsgc-clip-scroll' + (className ? ' ' + className : '')}
+        ref={ref}
+        style={{ maxHeight } as CSSProperties}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/client/components/HoverTip.tsx

@@ -0,0 +1,134 @@
+/**
+ * 对齐宿主 Tooltip 的 hover 气泡：portal 到 document.body，躲开
+ * `.dsgc-root` 的 container-type 把 position:fixed 按容器定位。
+ * @module dsh-group-chat/client/components
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+export type HoverTipSide = 'top' | 'right'
+
+interface HoverTipProps {
+  label: string
+  side?: HoverTipSide
+  delayMs?: number
+  maxWidth?: number
+  className?: string
+  children: ReactNode
+}
+
+interface AnchorBox {
+  x: number
+  top: number
+  bottom: number
+}
+
+/**
+ * @param props.label 气泡正文（pre-line）
+ * @param props.side 默认 right（对齐侧栏会话行）；composer 轮数用 top
+ * @param props.delayMs hover 延迟，默认 500；键盘 focus 立即出
+ */
+export function HoverTip(props: HoverTipProps): ReactNode {
+  const { label, side = 'right', delayMs = 500, maxWidth, className, children } = props
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const bubbleRef = useRef<HTMLSpanElement>(null)
+  const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const hover = useRef(false)
+  const [pos, setPos] = useState<AnchorBox | null>(null)
+  const [placement, setPlacement] = useState<'top' | 'bottom' | 'right'>(side)
+
+  const cancel = (): void => {
+    if (showTimer.current === null) return
+    clearTimeout(showTimer.current)
+    showTimer.current = null
+  }
+  const show = (): void => {
+    const el = anchorRef.current
+    if (!el || !label) return
+    const r = el.getBoundingClientRect()
+    setPlacement(side)
+    setPos({
+      x: side === 'right' ? r.right + 10 : r.left + r.width / 2,
+      top: r.top,
+      bottom: r.bottom,
+    })
+  }
+  const hideIfIdle = (): void => {
+    if (!hover.current && !(anchorRef.current && anchorRef.current.contains(document.activeElement))) setPos(null)
+  }
+
+  useEffect(() => cancel, [])
+  useLayoutEffect(() => {
+    if (!pos) return
+    const fit = (): void => {
+      const el = bubbleRef.current
+      if (!el) return
+      el.style.left = pos.x + 'px'
+      const r = el.getBoundingClientRect()
+      let dx = 0
+      if (r.right > window.innerWidth - 12) dx = window.innerWidth - 12 - r.right
+      if (r.left + dx < 12) dx = 12 - r.left
+      el.style.left = pos.x + dx + 'px'
+      if (side === 'right') return
+      const fitsBelow = pos.bottom + 8 + r.height <= window.innerHeight - 12
+      const fitsAbove = pos.top - 8 - r.height >= 12
+      if (placement === 'bottom' && !fitsBelow && fitsAbove) setPlacement('top')
+      if (placement === 'top' && !fitsAbove && fitsBelow) setPlacement('bottom')
+    }
+    fit()
+    window.addEventListener('resize', fit)
+    return () => { window.removeEventListener('resize', fit) }
+  }, [pos, placement, label, side])
+
+  const y = pos === null
+    ? 0
+    : placement === 'right'
+      ? pos.top + (pos.bottom - pos.top) / 2
+      : placement === 'top'
+        ? pos.top - 8
+        : pos.bottom + 8
+
+  return (
+    <>
+      <div
+        ref={anchorRef}
+        className={className}
+        onMouseEnter={() => {
+          hover.current = true
+          cancel()
+          if (delayMs <= 0) { show(); return }
+          showTimer.current = setTimeout(() => { showTimer.current = null; show() }, delayMs)
+        }}
+        onMouseLeave={() => {
+          hover.current = false
+          cancel()
+          hideIfIdle()
+        }}
+        onFocus={() => { cancel(); show() }}
+        onBlur={(e) => {
+          const next = e.relatedTarget as Node | null
+          if (next && anchorRef.current && anchorRef.current.contains(next)) return
+          cancel()
+          hideIfIdle()
+        }}
+      >
+        {children}
+      </div>
+      {pos
+        ? createPortal(
+          <span
+            ref={bubbleRef}
+            className="dsgc-hovertip"
+            data-side={placement}
+            role="tooltip"
+            style={{ left: pos.x, top: y, ...(maxWidth ? { maxWidth } : {}) }}
+          >
+            {label}
+          </span>,
+          document.body,
+        )
+        : null}
+    </>
+  )
+}

package/src/client/components/MessageFlow.tsx

@@ -4,9 +4,12 @@
  */
 
 import type { ReactNode, CSSProperties } from 'react'
+import { WINDOW_SIZE } from '../../core/constraints.ts'
 import { Icon, P } from '../lib/ui.ts'
 import { Bubble } from './Bubble.tsx'
+import { ConstraintList } from './ConstraintList.tsx'
 import { ThinkRow } from './ThinkRow.tsx'
+import { resolveFailedRole } from '../../core/errors.ts'
 import { roleById, type ClientSnapshot } from '../lib/model.ts'
 import { MD_LABELS } from '../lib/model.ts'
 
@@ -16,68 +19,56 @@ interface MessageFlowProps {
   busyNow: boolean
   msgById: Record<string, ClientSnapshot['messages'][number]>
   action: (payload: Record<string, unknown>) => Promise<unknown>
+  onRetrySpeak: (messageId: string) => void
 }
 
 export function MessageFlow(props: MessageFlowProps): ReactNode {
-  const { snap, sess, busyNow, msgById, action } = props
+  const { snap, sess, busyNow, msgById, action, onRetrySpeak } = props
 
   const bubbles: ReactNode[] = []
-  
-  if (sess) {
-    for (const mid of sess.messageIds) {
-      const m = msgById[mid]
-      if (!m) continue
-      // 角色在父级解析：Bubble 按值 memo（不依赖 snap identity），流式帧
-      // 不再触发已完成消息的全量重渲（每帧仅 live 行与派生列表变化）
-      const role = m.speaker !== 'user' && m.speaker !== 'system' ? roleById(snap, m.speaker) : null
-      bubbles.push(<Bubble key={m.id} m={m} role={role} />)
-    }
-  }
-  
-  // 流式尾巴
-  if (busyNow && snap.run.currentRoleId) {
-    const lr = roleById(snap, snap.run.currentRoleId)
-    if (lr) {
-      bubbles.push(
-        <div key="__live" className="dsgc-msg live">
-          <div
-            className="dsgc-avatar"
-            style={{ border: '2px solid ' + (lr.color || '#888'), '--role-color': lr.color || '#888' } as CSSProperties}
-          >
-            {lr.name.slice(0, 1)}
+  const replaceId = busyNow ? snap.run.replaceMessageId : null
+  const replaceMsg = replaceId ? msgById[replaceId] : null
+  const liveRoleId = snap.run.currentRoleId || (replaceMsg && (replaceMsg.failedRoleId || replaceMsg.speaker)) || null
+  const lr = busyNow && liveRoleId ? roleById(snap, liveRoleId) : null
+
+  const live = lr
+    ? (
+      <div key="__live" className="dsgc-msg live">
+        <div
+          className="dsgc-avatar"
+          style={{ border: '2px solid ' + (lr.color || '#888'), '--role-color': lr.color || '#888' } as CSSProperties}
+        >
+          {lr.name.slice(0, 1)}
+        </div>
+        <div className="dsgc-msgbody">
+          <div className="dsgc-msghead">
+            <span className="dsgc-msgname">{lr.name}</span>
+            <span className="dsgc-msgmodel">{lr.provider} / {lr.model}</span>
+            <span className="dsgc-msgtime dsgc-typing">深度求索...</span>
           </div>
-          <div className="dsgc-msgbody">
-            <div className="dsgc-msghead">
-              <span className="dsgc-msgname">{lr.name}</span>
-              <span className="dsgc-msgmodel">{lr.provider} / {lr.model}</span>
-              <span className="dsgc-msgtime dsgc-typing">深度求索...</span>
-            </div>
-            <div className="dsgc-msgtext live">
-              {snap.run.partialReasoning ? <ThinkRow text={snap.run.partialReasoning} running /> : null}
-              {snap.run.partial ? <P.MarkdownText text={snap.run.partial} streaming labels={MD_LABELS} /> : null}
-              {/* 首 delta 前的「思考中」占位（深度思考模型首字节可能等数秒到数十秒，
-                  空白气泡会被感知为卡死）；delta 到达后被真实思考行/正文自然替换 */}
-              {!snap.run.partial && !snap.run.partialReasoning
-                ? (
-                  <div className="dsgc-pending">
-                    {Icon(P.IconThinkOutline14, 14)}
-                    <span>思考中</span>
-                    <span className="dsgc-pendingdots" aria-hidden="true"><i /><i /><i /></span>
-                  </div>
+          <div className="dsgc-msgtext live">
+            {snap.run.partialReasoning ? <ThinkRow text={snap.run.partialReasoning} running /> : null}
+            {snap.run.partial ? <P.MarkdownText text={snap.run.partial} streaming labels={MD_LABELS} /> : null}
+            {/* 首 delta 前的「思考中」占位（深度思考模型首字节可能等数秒到数十秒，
+                空白气泡会被感知为卡死）；delta 到达后被真实思考行/正文自然替换 */}
+            {!snap.run.partial && !snap.run.partialReasoning
+              ? (
+                <div className="dsgc-pending">
+                  {Icon(P.IconThinkOutline14, 14)}
+                  <span>思考中</span>
+                  <span className="dsgc-pendingdots" aria-hidden="true"><i /><i /><i /></span>
+                </div>
                 )
-                : null}
-            </div>
+              : null}
           </div>
-        </div>,
+        </div>
+      </div>
       )
-    }
-  }
-  
-  // 命令确认卡片
+    : null
+
   const pc = busyNow && snap.run.pendingConfirm && sess && snap.run.sessionId === sess.id ? snap.run.pendingConfirm : null
-  if (pc) {
-    const lr = roleById(snap, snap.run.currentRoleId)
-    bubbles.push(
+  const confirm = pc
+    ? (
       <div key="__confirm" className="dsgc-confirm">
         <div className="dsgc-confirmtitle">
           {Icon(P.IconWarningOutline16, 14)}
@@ -89,9 +80,42 @@ export function MessageFlow(props: MessageFlowProps): ReactNode {
           <P.Button variant="primary" size="sm" onClick={() => { void action({ kind: 'confirmCommand', toolCallId: pc.toolCallId, allow: true }) }}>允许</P.Button>
           <P.Button variant="outline" size="sm" onClick={() => { void action({ kind: 'confirmCommand', toolCallId: pc.toolCallId, allow: false }) }}>拒绝</P.Button>
         </div>
-      </div>,
-    )
+      </div>
+      )
+    : null
+
+  let livePlaced = false
+
+  if (sess) {
+    // 循环不变量：本群角色表只过滤一次（流式期间每帧执行的热路径）
+    const groupRoles = snap.roles.filter((r) => r.groupId === sess.groupId)
+    const ids = sess.messageIds
+    const memo = sess.constraints && sess.constraints.length
+      ? <ConstraintList key={sess.id + '-constraints'} items={sess.constraints} />
+      : null
+    // 折点 = 最近 WINDOW_SIZE 条之前。消息都还在窗口内时卡放流顶。
+    const foldAt = memo && ids.length > WINDOW_SIZE ? ids.length - WINDOW_SIZE : 0
+    if (memo && foldAt === 0) bubbles.push(memo)
+    for (let i = 0; i < ids.length; i++) {
+      if (memo && foldAt > 0 && i === foldAt) bubbles.push(memo)
+      const m = msgById[ids[i]]
+      if (!m) continue
+      // 角色在父级解析：Bubble 按值 memo（不依赖 snap identity），流式帧
+      // 不再触发已完成消息的全量重渲（每帧仅 live 行与派生列表变化）
+      const role = resolveFailedRole(m, groupRoles) || (m.speaker !== 'user' && m.speaker !== 'system' ? roleById(snap, m.speaker) : null)
+      // 原地重试：该槽位换成 live（确认卡紧随其后），不要钉在列表末尾
+      if (replaceId && m.id === replaceId) {
+        if (live) bubbles.push(live)
+        if (confirm) bubbles.push(confirm)
+        livePlaced = true
+        continue
+      }
+      bubbles.push(<Bubble key={m.id} m={m} role={role} busy={!!snap.run.running} onRetry={onRetrySpeak} />)
+    }
   }
 
+  if (live && !livePlaced) bubbles.push(live)
+  if (confirm && !livePlaced) bubbles.push(confirm)
+
   return <>{bubbles}</>
 }

package/src/client/components/MsgActions.tsx

@@ -0,0 +1,85 @@
+/**
+ * 消息操作条：贴在气泡外下方。用户/角色消息悬停出「复制」；失败卡常驻「复制 / 重试」。
+ * @module dsh-group-chat/client/MsgActions
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+
+export interface MsgActionsProps {
+  copyText: string
+  onRetry?: () => void
+  retryDisabled?: boolean
+  retryTitle?: string
+  /** 失败卡：不依赖悬停，始终可见。 */
+  always?: boolean
+}
+
+async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch { /* fall through */ }
+  try {
+    const el = document.createElement('textarea')
+    el.value = text
+    el.setAttribute('readonly', '')
+    el.style.position = 'fixed'
+    el.style.left = '-9999px'
+    document.body.appendChild(el)
+    el.select()
+    const ok = document.execCommand('copy')
+    document.body.removeChild(el)
+    return ok
+  } catch {
+    return false
+  }
+}
+
+export function MsgActions(props: MsgActionsProps): ReactNode {
+  const { copyText, onRetry, retryDisabled, retryTitle, always } = props
+  const [copied, setCopied] = useState(false)
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => () => { if (copiedTimer.current) clearTimeout(copiedTimer.current) }, [])
+
+  const copy = async (): Promise<void> => {
+    if (!copyText) return
+    const ok = await writeClipboard(copyText)
+    if (!ok) return
+    setCopied(true)
+    if (copiedTimer.current) clearTimeout(copiedTimer.current)
+    copiedTimer.current = setTimeout(() => { setCopied(false) }, 1400)
+  }
+
+  return (
+    <div className={'dsgc-msgops' + (always ? ' always' : '')} role="group" aria-label="消息操作">
+      <button
+        type="button"
+        className={'dsgc-msgop' + (copied ? ' done' : '')}
+        title={copied ? '已复制' : '复制'}
+        aria-label={copied ? '已复制' : '复制'}
+        onClick={(e) => { e.stopPropagation(); void copy() }}
+      >
+        {Icon(copied ? P.IconCheckOutline14 : P.IconCopyOutline16, 14)}
+        <span>{copied ? '已复制' : '复制'}</span>
+      </button>
+      {onRetry
+        ? (
+          <button
+            type="button"
+            className="dsgc-msgop retry"
+            title={retryTitle || '重试'}
+            aria-label={retryTitle || '重试'}
+            disabled={retryDisabled}
+            onClick={(e) => { e.stopPropagation(); if (!retryDisabled) onRetry() }}
+          >
+            {Icon(P.IconRefreshOutline14, 14)}
+            <span>重试</span>
+          </button>
+          )
+        : null}
+    </div>
+  )
+}