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

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,41 @@ 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 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 groupRoles = snap.roles.filter((r) => r.groupId === sess.groupId)
+      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>
+  )
+}

package/src/client/components/NavPanel.tsx

@@ -5,6 +5,7 @@
 
 import type { ReactNode, KeyboardEvent as ReactKeyboardEvent } from 'react'
 import { Icon, P } from '../lib/ui.ts'
+import { HoverTip } from './HoverTip.tsx'
 import { groupById, sessById, sessStatus, SESS_STATUS_LABEL, type ClientSnapshot } from '../lib/model.ts'
 
 interface NavPanelProps {
@@ -124,7 +125,11 @@ export function NavPanel(props: NavPanelProps): ReactNode {
                   onClick={(e) => { e.stopPropagation() }}
                 />
                 )
-              : <span className="dsgc-sess-name">{s.name}</span>}
+              : (
+                <HoverTip label={s.name} side="right" delayMs={500} className="dsgc-sess-name">
+                  {s.name}
+                </HoverTip>
+                )}
             <span className="dsgc-nodeops">
               <button
                 className="dsgc-opbtn"

package/src/client/components/ThinkRow.tsx

@@ -6,6 +6,7 @@
 import { useState, type ReactNode } from 'react'
 import { P } from '../lib/ui.ts'
 import { firstLine, latestLine } from '../lib/model.ts'
+import { ClipWell, Fold } from './Fold.tsx'
 
 export function ThinkRow(props: { text: string, running?: boolean }): ReactNode {
   const text = props.text || ''
@@ -24,9 +25,12 @@ export function ThinkRow(props: { text: string, running?: boolean }): ReactNode
         expandOnRowClick
         onToggle={() => { setExpanded((v) => !v) }}
         collapsedContent={text ? <span className="dsgc-thinksummary">{summary}</span> : null}
-      >
-        <div className="dsgc-thinkbody">{text}</div>
-      </P.DisclosureRow>
+      />
+      <Fold open={expanded}>
+        <ClipWell maxHeight={320} watch={text}>
+          <div className="dsgc-thinkbody">{text}</div>
+        </ClipWell>
+      </Fold>
     </div>
   )
 }

package/src/client/components/ToolRow.tsx

@@ -6,6 +6,7 @@
 import { useState, type ReactNode } from 'react'
 import { Icon, P, pickPrimitive } from '../lib/ui.ts'
 import type { ToolCallView } from '../lib/model.ts'
+import { ClipWell, Fold } from './Fold.tsx'
 
 const TOOL_ICONS: Record<string, string> = { read_file: 'IconBrowseOutline16', list_dir: 'IconFolderOpenOutline16', run_command: 'IconCodeOutline16' }
 
@@ -43,9 +44,12 @@ export function ToolRow(props: { c: ToolCallView }): ReactNode {
             {statusText + (dur ? ' · ' + dur : '')}
           </span>
         }
-      >
-        <div className="dsgc-toolbody">{c.output || '（无输出）'}</div>
-      </P.DisclosureRow>
+      />
+      <Fold open={expanded}>
+        <ClipWell maxHeight={260} watch={c.output}>
+          <div className="dsgc-toolbody">{c.output || '（无输出）'}</div>
+        </ClipWell>
+      </Fold>
     </div>
   )
 }

package/src/client/hooks/useComposer.ts

@@ -3,8 +3,9 @@
  * @module dsh-group-chat/client/hooks
  */
 
-import { useCallback, useEffect, type ClipboardEvent as ReactClipboardEvent, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, type ClipboardEvent as ReactClipboardEvent, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
 import { execCommand, queryAtCaret, serializeInput, chipHtml, fileChipHtml } from '../utils/utils.ts'
+import { readComposerDraft, writeComposerDraft } from '../lib/composer-draft.ts'
 import type { AtToken } from '../../shared/file-mention-grammar.ts'
 import type { SnapshotRole } from '../lib/model.ts'
 
@@ -44,12 +45,18 @@ export function useComposerInput(
   setInput: (val: string) => void,
   setMention: (val: AtToken | null) => void,
   setMentionIdx: (val: number) => void,
+  sessionId?: string | null,
 ) {
-  /** 从 DOM 同步 input 状态（序列化） */
+  const sessionIdRef = useRef(sessionId)
+  sessionIdRef.current = sessionId
+
+  /** 从 DOM 同步 input 状态（序列化），并写入当前会话草稿槽。 */
   const syncFromDOM = useCallback((): void => {
     const el = inputRef.current
     if (!el) return
-    setInput(serializeInput(el))
+    const text = serializeInput(el)
+    setInput(text)
+    writeComposerDraft(sessionIdRef.current, el.innerHTML, text)
   }, [inputRef, setInput])
 
   const onInputCE = useCallback((): void => {
@@ -84,6 +91,36 @@ export function useComposerInput(
   }
 }
 
+/**
+ * 按会话恢复草稿：切会话时先把当前 HTML 写入旧槽，再灌入新槽；
+ * 面板重挂载（主会话⇄群聊）时 editor 是新节点，从模块缓存灌回。
+ */
+export function useComposerDraft(
+  sessionId: string | null | undefined,
+  inputRef: React.RefObject<HTMLDivElement>,
+  setInput: (val: string) => void,
+  setMention: (val: AtToken | null) => void,
+): void {
+  const prevIdRef = useRef<string | null>(null)
+  useLayoutEffect(() => {
+    const el = inputRef.current
+    const prev = prevIdRef.current
+    const next = sessionId || null
+    if (el && prev && prev !== next) writeComposerDraft(prev, el.innerHTML, serializeInput(el))
+    prevIdRef.current = next
+    if (!next) return
+    const draft = readComposerDraft(next)
+    if (el) el.innerHTML = draft.html
+    setInput(draft.text)
+    setMention(null)
+    return () => {
+      const node = inputRef.current
+      const id = prevIdRef.current
+      if (node && id) writeComposerDraft(id, node.innerHTML, serializeInput(node))
+    }
+  }, [sessionId, inputRef, setInput, setMention])
+}
+
 export function useMentionChip(
   inputRef: React.RefObject<HTMLDivElement>,
   setMention: (val: AtToken | null) => void,

package/src/client/hooks/useGroupChatState.ts

@@ -5,6 +5,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { api } from '../lib/api.ts'
+import { readComposerDraft } from '../lib/composer-draft.ts'
 import type { ClientSnapshot, ModelsResponse, RoleDraft } from '../lib/model.ts'
 import type { AtToken } from '../../shared/file-mention-grammar.ts'
 
@@ -22,8 +23,8 @@ export interface ActionOk {
 
 /**
  * 面板切换缓存（模块级，跨挂载存活）：main 为 keyed 槽，主会话⇄群聊切换会
- * 整体卸载重挂面板组件；缓存最近快照与选中项让重挂载瞬时恢复上次视图，
- * 挂载后的 state 拉取 / SSE 首帧再行校正（本机回路往返仅数毫秒）。
+ * 整体卸载重挂面板组件；缓存最近快照、选中项与按会话分槽的未发送草稿，
+ * 让重挂载瞬时恢复上次视图。挂载后的 state 拉取 / SSE 首帧再行校正。
  */
 let cachedSnap: ClientSnapshot | null = null
 let cachedGid: string | null = null
@@ -84,8 +85,8 @@ export function useGroupChatState() {
   const [partsSel, setPartsSel] = useState<string[] | null>(null)
   const [rounds, setRounds] = useState(1)
   
-  // 输入与 @提及
-  const [input, setInput] = useState('')
+  // 输入与 @提及（文本初值取当前选中会话草稿，HTML 由 useComposerDraft 灌回）
+  const [input, setInput] = useState(() => readComposerDraft(cachedSid).text)
   const [mention, setMention] = useState<AtToken | null>(null)
   const [mentionIdx, setMentionIdx] = useState(0)
   

package/src/client/lib/composer-draft.ts

@@ -0,0 +1,47 @@
+/**
+ * 未发送草稿：按会话 id 分槽，模块级跨挂载存活。
+ * 主会话⇄群聊会整页卸载 composer，contentEditable 的 HTML 必须自行记住。
+ * @module dsh-group-chat/client/composer-draft
+ */
+
+export interface ComposerDraft {
+  html: string
+  text: string
+}
+
+const LIMIT = 32
+const drafts = new Map<string, ComposerDraft>()
+
+const empty = (): ComposerDraft => ({ html: '', text: '' })
+
+/** 读指定会话草稿；命中则提到 LRU 最近端。 */
+export function readComposerDraft(sessionId: string | null | undefined): ComposerDraft {
+  if (!sessionId) return empty()
+  const hit = drafts.get(sessionId)
+  if (!hit) return empty()
+  drafts.delete(sessionId)
+  drafts.set(sessionId, hit)
+  return hit
+}
+
+/** 写入；空草稿删槽。超出上限淘汰最旧槽。 */
+export function writeComposerDraft(sessionId: string | null | undefined, html: string, text: string): void {
+  if (!sessionId) return
+  drafts.delete(sessionId)
+  if (!html && !text) return
+  drafts.set(sessionId, { html, text })
+  if (drafts.size > LIMIT) {
+    const oldest = drafts.keys().next().value
+    if (oldest !== undefined) drafts.delete(oldest)
+  }
+}
+
+/** 发送成功或明确丢弃时摘槽。 */
+export function clearComposerDraft(sessionId: string | null | undefined): void {
+  if (sessionId) drafts.delete(sessionId)
+}
+
+/** 测试用：清空全部槽位。 */
+export function resetComposerDrafts(): void {
+  drafts.clear()
+}