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

package/src/client/components/Bubble.tsx

@@ -10,23 +10,40 @@
 
 import { memo, type ReactNode } from 'react'
 import { P } from '../lib/ui.ts'
-import { fmtTime, MD_LABELS, type ClientSnapshot, type SnapshotRole } from '../lib/model.ts'
+import { classifySpeakFailure, formatSpeakFailureCopy, isSpeakFailure } from '../../core/errors.ts'
+import { fmtTime, MD_LABELS, type SnapshotRole } from '../lib/model.ts'
+import type { SnapshotMessage } from '../lib/model.ts'
 import { ThinkRow } from './ThinkRow.tsx'
 import { ToolRow } from './ToolRow.tsx'
+import { FailCard } from './FailCard.tsx'
+import { MsgActions } from './MsgActions.tsx'
 
 export interface BubbleProps {
-  m: ClientSnapshot['messages'][number]
+  m: SnapshotMessage
   /** 父级解析好的发言角色（user/system 消息为 null）——避免 Bubble 依赖 snap identity。 */
   role: SnapshotRole | null
+  busy?: boolean
+  onRetry?: (messageId: string) => void
 }
 
-function BubbleInner({ m, role }: BubbleProps): ReactNode {
+function BubbleInner({ m, role, busy, onRetry }: BubbleProps): ReactNode {
   const isUser = m.speaker === 'user'
-  const isSys = m.speaker === 'system'
-  const name = isUser ? '我' : isSys ? '系统' : role ? role.name : '成员'
-  if (isSys) return <div className={'dsgc-sysmsg' + (m.error ? ' err' : '')}>{m.text}</div>
+  const isFail = isSpeakFailure(m)
+  const isSys = m.speaker === 'system' && !isFail && !role
+  const name = isUser ? '我' : role ? role.name : isSys ? '系统' : '成员'
+  if (isSys) return <div className="dsgc-sysmsg">{m.text}</div>
+
+  const retryTitle = !role
+    ? '失败角色已不存在，无法重试'
+    : !role.enabled
+      ? '该角色已停用，无法重试'
+      : busy
+        ? '已有对话进行中，请先停止'
+        : '重试该角色发言'
+  const copyText = isFail ? formatSpeakFailureCopy(classifySpeakFailure(m.text)) : (m.text || '')
+
   return (
-    <div className={'dsgc-msg' + (isUser ? ' mine' : '')}>
+    <div className={'dsgc-msg' + (isUser ? ' mine' : '') + (isFail ? ' fail' : '')}>
       <div
         className={'dsgc-avatar' + (isUser ? ' mine' : '')}
         style={isUser || !role ? undefined : { border: '2px solid ' + (role.color || '#888') }}
@@ -39,15 +56,24 @@ function BubbleInner({ m, role }: BubbleProps): ReactNode {
           {m.model ? <span className="dsgc-msgmodel" title={m.model}>{m.model}</span> : null}
           {m.ts ? <span className="dsgc-msgtime">{fmtTime(m.ts)}</span> : null}
         </div>
-        {isUser
-          ? <div className="dsgc-msgtext">{m.text}</div>
-          : (
-            <div className="dsgc-msgtext">
-              {m.reasoning ? <ThinkRow text={m.reasoning} /> : null}
-              {(Array.isArray(m.toolCalls) ? m.toolCalls : []).map((c, i) => <ToolRow key={'tc' + i} c={c} />)}
-              <P.MarkdownText text={m.text || '（无内容）'} labels={MD_LABELS} />
-            </div>
-            )}
+        {isFail
+          ? <FailCard raw={m.text} />
+          : isUser
+            ? <div className="dsgc-msgtext">{m.text}</div>
+            : (
+              <div className="dsgc-msgtext">
+                {m.reasoning ? <ThinkRow text={m.reasoning} /> : null}
+                {(Array.isArray(m.toolCalls) ? m.toolCalls : []).map((c, i) => <ToolRow key={'tc' + i} c={c} />)}
+                <P.MarkdownText text={m.text || '（无内容）'} labels={MD_LABELS} />
+              </div>
+              )}
+        <MsgActions
+          copyText={copyText}
+          always={isFail}
+          onRetry={isFail && onRetry ? () => { onRetry(m.id) } : undefined}
+          retryDisabled={busy || !role || !role.enabled}
+          retryTitle={retryTitle}
+        />
       </div>
     </div>
   )
@@ -55,10 +81,11 @@ function BubbleInner({ m, role }: BubbleProps): ReactNode {
 
 /** 渲染相关字段的值比较（消息不可变；角色仅名/色参与渲染）。 */
 function bubblePropsEqual(a: BubbleProps, b: BubbleProps): boolean {
+  if (a.busy !== b.busy || (a.onRetry == null) !== (b.onRetry == null)) return false
   const x = a.m
   const y = b.m
   if (x !== y) {
-    if (x.id !== y.id || x.speaker !== y.speaker || x.text !== y.text || x.reasoning !== y.reasoning || x.model !== y.model || x.error !== y.error || x.ts !== y.ts) return false
+    if (x.id !== y.id || x.speaker !== y.speaker || x.text !== y.text || x.reasoning !== y.reasoning || x.model !== y.model || x.error !== y.error || x.failedRoleId !== y.failedRoleId || x.ts !== y.ts) return false
     const ta = Array.isArray(x.toolCalls) ? x.toolCalls : []
     const tb = Array.isArray(y.toolCalls) ? y.toolCalls : []
     if (ta.length !== tb.length) return false
@@ -70,7 +97,7 @@ function bubblePropsEqual(a: BubbleProps, b: BubbleProps): boolean {
   }
   const ra = a.role
   const rb = b.role
-  return (ra ? ra.name + '\u0000' + (ra.color || '') : '') === (rb ? rb.name + '\u0000' + (rb.color || '') : '')
+  return (ra ? ra.id + '\u0000' + ra.name + '\u0000' + (ra.color || '') + '\u0000' + (ra.enabled ? '1' : '0') : '') === (rb ? rb.id + '\u0000' + rb.name + '\u0000' + (rb.color || '') + '\u0000' + (rb.enabled ? '1' : '0') : '')
 }
 
 export const Bubble = memo(BubbleInner, bubblePropsEqual)

package/src/client/components/ChatPanel.tsx

@@ -54,6 +54,7 @@ interface ChatPanelProps {
   action: (payload: Record<string, unknown>) => Promise<unknown>
   mutate: (args: Record<string, unknown>) => Promise<unknown>
   setMention: (val: AtToken | null) => void
+  onRetrySpeak: (messageId: string) => void
 }
 
 export function ChatPanel(props: ChatPanelProps): ReactNode {
@@ -101,6 +102,7 @@ export function ChatPanel(props: ChatPanelProps): ReactNode {
     action,
     mutate,
     setMention,
+    onRetrySpeak,
   } = props
 
   const commitTopic = (): void => {
@@ -115,6 +117,7 @@ export function ChatPanel(props: ChatPanelProps): ReactNode {
       busyNow={busyNow}
       msgById={msgById}
       action={action}
+      onRetrySpeak={onRetrySpeak}
     />
   )
 
@@ -143,18 +146,20 @@ export function ChatPanel(props: ChatPanelProps): ReactNode {
       </button>
       
       <div className="dsgc-chathead">
-        {sess ? <span className="dsgc-sess-title" title={'当前会话：' + sess.name}>{sess.name}</span> : null}
-        <input
-          className="dsgc-topic"
-          value={topicDraft === null ? (sess ? sess.topic : '') : topicDraft}
-          placeholder="设置本会话主题（可选）…"
-          onChange={(e) => { setTopicDraft(e.target.value) }}
-          onBlur={commitTopic}
-          onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
-        />
-        <P.Button variant="ghost" size="sm" className="dsgc-clearbtn" title="清空当前会话的消息记录" onClick={() => { if (sess) setConfirmClear(true) }}>
-          清空
-        </P.Button>
+        <div className="dsgc-chathead-row">
+          {sess ? <span className="dsgc-sess-title" title={'当前会话：' + sess.name}>{sess.name}</span> : null}
+          <input
+            className="dsgc-topic"
+            value={topicDraft === null ? (sess ? sess.topic : '') : topicDraft}
+            placeholder="设置本会话主题（可选）…"
+            onChange={(e) => { setTopicDraft(e.target.value) }}
+            onBlur={commitTopic}
+            onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
+          />
+          <P.Button variant="ghost" size="sm" className="dsgc-clearbtn" title="清空当前会话的消息记录" onClick={() => { if (sess) setConfirmClear(true) }}>
+            清空
+          </P.Button>
+        </div>
       </div>
       
       <div className="dsgc-msgs" ref={scrollRef} onScroll={onMsgsScroll}>

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,69 @@
+/**
+ * 会话流折点处：只读结论备忘卡（超过 4 条默认露 3 条）。
+ * @module dsh-group-chat/client/components
+ */
+
+import { useState, type ReactNode } from 'react'
+import type { SessionConstraint } from '../../core/types.ts'
+import { ClipWell, Fold } from './Fold.tsx'
+
+const KIND_LABEL: Record<SessionConstraint['kind'], string> = {
+  decided: '已定',
+  rejected: '否决',
+  open: '未决',
+}
+
+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}
+    </>
+  )
+}