feat: add retry button on last assistant message

zjx · zjx · commit 10acfeb5e091 · 2026-07-26T13:41:19.000+08:00
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
@@ -1433,11 +1433,16 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
         // the panel to disappear (or update to the new run state)
         // instead of staying frozen on the cancelled row.
         onTaskRunAction={reconcileWithDb}
+        onRetryLastMessage={() => {
+          const lastUserMsg = findLastUserMessage();
+          if (lastUserMsg) sendMessageRef.current?.(lastUserMsg);
+        }}
       />
       {/* End-of-turn terminal reason chip (only shown when stream is not active) */}
       {!isStreaming && (
         <TerminalReasonChip
           reason={streamSnapshot?.terminalReason}
+          phase={streamSnapshot?.phase}
           onAction={handleTerminalAction}
         />
       )}
diff --git a/src/components/chat/MessageItem.tsx b/src/components/chat/MessageItem.tsx
@@ -413,10 +413,10 @@ function extractTruncatedWidget(fenceBody: string): ShowWidgetData | null {
 interface MessageItemProps {
   message: Message;
   sessionId?: string;
-  /** Whether this is an assistant workspace project */
   isAssistantProject?: boolean;
-  /** Assistant name for avatar */
   assistantName?: string;
+  isLastAssistant?: boolean;
+  onRetry?: () => void;
 }
 
 interface ToolBlock {
@@ -618,7 +618,7 @@ function TokenUsageDisplay({ usage }: { usage: TokenUsage }) {
 
 const COLLAPSE_HEIGHT = 300;
 
-export const MessageItem = memo(function MessageItem({ message, sessionId, isAssistantProject, assistantName }: MessageItemProps) {
+export const MessageItem = memo(function MessageItem({ message, sessionId, isAssistantProject, assistantName, isLastAssistant, onRetry }: MessageItemProps) {
   const isUser = message.role === 'user';
 
   // Collapse/expand state for long user messages (hooks must be called unconditionally)
@@ -843,10 +843,23 @@ export const MessageItem = memo(function MessageItem({ message, sessionId, isAss
         );
       })()}
 
-      {/* Footer with copy, timestamp and token usage */}
+      {/* Footer with copy, retry, timestamp and token usage */}
       <div className={`flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
         {!isUser && <span className="text-xs text-muted-foreground/50">{timestamp}</span>}
         {!isUser && tokenUsage && <TokenUsageDisplay usage={tokenUsage} />}
+        {!isUser && isLastAssistant && onRetry && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onRetry}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs text-muted-foreground/60 hover:text-muted-foreground h-auto"
+            title="Retry"
+          >
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M13.65 2.35A8 8 0 1 0 15.94 9H13.9a6 6 0 1 1-1.63-5.27L10 6h6V0l-2.35 2.35z" fill="currentColor"/>
+            </svg>
+          </Button>
+        )}
         {displayText && <CopyButton text={displayText} />}
       </div>
     </AIMessage>
diff --git a/src/components/chat/MessageList.tsx b/src/components/chat/MessageList.tsx
@@ -229,6 +229,7 @@ interface MessageListProps {
    * and the panel never disappears even after the abandon PATCH lands.
    */
   onTaskRunAction?: () => void;
+  onRetryLastMessage?: () => void;
 }
 
 export function MessageList({
@@ -251,6 +252,7 @@ export function MessageList({
   startedAt,
   isAssistantProject,
   assistantName,
+  onRetryLastMessage,
 }: MessageListProps) {
   const { t } = useTranslation();
 
@@ -328,6 +330,7 @@ export function MessageList({
           statusText={statusText}
           onForceStop={onForceStop}
           startedAt={startedAt}
+          onRetryLastMessage={onRetryLastMessage}
         />
       </ConversationContent>
       <ConversationScrollButton />
@@ -355,6 +358,7 @@ interface VirtualTranscriptProps {
   statusText?: string;
   onForceStop?: () => void;
   startedAt?: number;
+  onRetryLastMessage?: () => void;
 }
 
 /**
@@ -388,6 +392,7 @@ function VirtualTranscript({
   statusText,
   onForceStop,
   startedAt,
+  onRetryLastMessage,
 }: VirtualTranscriptProps) {
   const { t } = useTranslation();
   const { scrollRef } = useStickToBottomContext();
@@ -483,7 +488,14 @@ function VirtualTranscript({
     return (
       <div id={`msg-${message.id}`} className="group pb-6">
         {leadingMarker}
-        <MessageItem message={message} sessionId={sessionId} isAssistantProject={isAssistantProject} assistantName={assistantName} />
+        <MessageItem
+          message={message}
+          sessionId={sessionId}
+          isAssistantProject={isAssistantProject}
+          assistantName={assistantName}
+          isLastAssistant={!isStreaming && message.role === 'assistant' && idx === messages.length - 1}
+          onRetry={!isStreaming && message.role === 'assistant' && idx === messages.length - 1 ? onRetryLastMessage : undefined}
+        />
         {rewindSdkUuid && sessionId && !isStreaming && (
           <RewindButton sessionId={sessionId} userMessageId={rewindSdkUuid} />
         )}
diff --git a/src/components/chat/TerminalReasonChip.tsx b/src/components/chat/TerminalReasonChip.tsx
@@ -8,18 +8,16 @@
  *
  * Only renders for reasons that carry information users can act on or interpret.
  * Silent for `completed` (normal) and `aborted_*` (user-initiated).
+ *
+ * When `phase` is 'error' or 'stopped' without a known reason, a generic
+ * retry button is shown so users can quickly re-send the last message after
+ * an interruption or network error.
  */
 
 import { useTranslation } from '@/hooks/useTranslation';
 import type { TranslationKey } from '@/i18n';
+import type { StreamPhase } from '@/types';
 
-/**
- * Actions a user can take from the chip. Each maps to a handler in
- * ChatView that wires it to the corresponding subsystem (compressor,
- * context1m toggle, model switch, router, etc.). "requiresConfirm"
- * actions pop a 2nd-step AlertDialog before the destructive step runs
- * (per feedback_no_silent_auto_irreversible memory).
- */
 export type TerminalActionId =
   | 'compress_and_retry'
   | 'enable_1m_and_retry'
@@ -32,20 +30,18 @@ export type TerminalActionId =
 
 interface Props {
   reason: string | undefined;
+  phase?: StreamPhase;
   onAction?: (actionId: TerminalActionId) => void;
 }
 
 type Tone = 'warning' | 'error' | 'info' | 'muted';
 
 interface ActionDescriptor {
   id: TerminalActionId;
-  /** i18n key under 'terminalAction.*' for the button label */
   labelKey: TranslationKey;
-  /** Primary actions use a filled button; secondary use ghost */
   variant: 'primary' | 'secondary';
 }
 
-// Per-reason action mapping. Order in the array = visual order.
 const ACTIONS_BY_REASON: Record<string, ActionDescriptor[]> = {
   prompt_too_long: [
     { id: 'compress_and_retry', labelKey: 'terminalAction.compressAndRetry' as TranslationKey, variant: 'primary' },
@@ -73,7 +69,6 @@ const ACTIONS_BY_REASON: Record<string, ActionDescriptor[]> = {
   model_error: [
     { id: 'retry_simple', labelKey: 'terminalAction.retry' as TranslationKey, variant: 'primary' },
   ],
-  // tool_deferred handled by Phase 7b's deferred-tool card, no action here.
 };
 
 const TONE_BY_REASON: Record<string, Tone> = {
@@ -88,13 +83,8 @@ const TONE_BY_REASON: Record<string, Tone> = {
   tool_deferred: 'info',
 };
 
-// Reasons that should render silently (no chip). Users either already know
-// (they cancelled) or the turn completed normally.
 const SILENT_REASONS = new Set(['completed', 'aborted_streaming', 'aborted_tools']);
 
-// Whitelist of reasons we have explicit i18n labels for. Anything else
-// (e.g. a future SDK value we haven't translated yet) renders under the
-// 'unknown' key so the UI never leaks the raw reason string.
 const KNOWN_REASONS = new Set([
   'max_turns',
   'prompt_too_long',
@@ -114,21 +104,47 @@ const TONE_CLASSES: Record<Tone, string> = {
   muted: 'bg-muted text-muted-foreground border-border',
 };
 
-export function TerminalReasonChip({ reason, onAction }: Props) {
+const RETRY_ACTION: ActionDescriptor = {
+  id: 'retry_simple',
+  labelKey: 'terminalAction.retry' as TranslationKey,
+  variant: 'primary',
+};
+
+export function TerminalReasonChip({ reason, phase, onAction }: Props) {
   const { t } = useTranslation();
 
-  if (!reason || SILENT_REASONS.has(reason)) return null;
+  const isInterrupted = phase === 'error' || phase === 'stopped';
+
+  if (!reason || SILENT_REASONS.has(reason)) {
+    if (isInterrupted && onAction) {
+      return (
+        <div className="mx-auto mt-2 flex w-full max-w-3xl flex-wrap items-center justify-start gap-2 px-4">
+          <button
+            type="button"
+            onClick={() => onAction(RETRY_ACTION.id)}
+            data-terminal-action={RETRY_ACTION.id}
+            className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted"
+          >
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
+              <path d="M13.65 2.35A8 8 0 1 0 15.94 9H13.9a6 6 0 1 1-1.63-5.27L10 6h6V0l-2.35 2.35z" fill="currentColor"/>
+            </svg>
+            {t(RETRY_ACTION.labelKey)}
+          </button>
+        </div>
+      );
+    }
+    return null;
+  }
 
-  // Use whitelist rather than `t(key) || t(fallback)` because translate()
-  // returns the raw key when missing, so the `||` branch would never fire
-  // and a new SDK reason would leak a "terminal.new_reason" string to the UI.
   const isKnown = KNOWN_REASONS.has(reason);
   const tone = TONE_BY_REASON[reason] ?? 'warning';
   const label = isKnown
     ? t(`terminal.${reason}` as TranslationKey)
     : t('terminal.unknown' as TranslationKey);
   const actions = onAction ? (ACTIONS_BY_REASON[reason] || []) : [];
 
+  const showRetry = isInterrupted && actions.every(a => a.id !== 'retry_simple') && onAction;
+
   return (
     <div className="mx-auto mt-2 flex w-full max-w-3xl flex-wrap items-center justify-start gap-2 px-4">
       <span
@@ -152,6 +168,19 @@ export function TerminalReasonChip({ reason, onAction }: Props) {
           {t(action.labelKey)}
         </button>
       ))}
+      {showRetry && (
+        <button
+          type="button"
+          onClick={() => onAction(RETRY_ACTION.id)}
+          data-terminal-action={RETRY_ACTION.id}
+          className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${TONE_CLASSES[tone]} hover:opacity-90`}
+        >
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
+            <path d="M13.65 2.35A8 8 0 1 0 15.94 9H13.9a6 6 0 1 1-1.63-5.27L10 6h6V0l-2.35 2.35z" fill="currentColor"/>
+          </svg>
+          {t(RETRY_ACTION.labelKey)}
+        </button>
+      )}
     </div>
   );
 }
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -1372,6 +1372,8 @@ const en = {
   'terminal.hook_stopped': 'Hook stopped this turn',
   'terminal.tool_deferred': 'Tool awaiting response',
   'terminal.unknown': 'Turn ended',
+  'terminal.streamError': 'Response interrupted — connection error',
+  'terminal.streamStopped': 'Response interrupted',
 
   // ── TerminalReason action buttons (Phase 1b) ──
   'terminalAction.compressAndRetry': 'Compress & retry',
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -1353,6 +1353,8 @@ const zh: Record<TranslationKey, string> = {
   'terminal.hook_stopped': 'Hook 中断本轮',
   'terminal.tool_deferred': '有工具等待响应',
   'terminal.unknown': '本轮已结束',
+  'terminal.streamError': '回复中断，连接异常',
+  'terminal.streamStopped': '回复已中断',
 
   // ── TerminalReason action buttons (Phase 1b) ──
   'terminalAction.compressAndRetry': '压缩并重试',
