@nextclaw/ui 0.5.45 → 0.5.47

package/src/components/chat/ChatThread.tsx

@@ -7,7 +7,7 @@ import {
   extractToolCards,
   normalizeChatRole,
   type ChatRole,
-  type ChatTimelineAssistantFlowItem,
+  type ChatTimelineAssistantTurnItem,
   type ToolCard
 } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
@@ -188,20 +188,27 @@ function MessageCard({ message }: { message: SessionMessageView }) {
   );
 }
 
-function AssistantFlowCard({ item }: { item: ChatTimelineAssistantFlowItem }) {
+function AssistantTurnCard({ item }: { item: ChatTimelineAssistantTurnItem }) {
   return (
     <div className="rounded-2xl border px-4 py-3 shadow-sm bg-white text-gray-900 border-gray-200">
-      {item.primaryText && <MarkdownBlock text={item.primaryText} role="assistant" />}
-      {item.primaryReasoning && <ReasoningBlock reasoning={item.primaryReasoning} isUser={false} />}
-      {item.toolCards.length > 0 && (
-        <div className={cn('space-y-2', (item.primaryText || item.primaryReasoning) && 'mt-3')}>
-          {item.toolCards.map((card, index) => (
-            <ToolCardView key={`${card.kind}-${card.name}-${card.callId ?? index}`} card={card} />
-          ))}
-        </div>
-      )}
-      {item.followupReasoning && <ReasoningBlock reasoning={item.followupReasoning} isUser={false} />}
-      {item.followupText && <div className="mt-3"><MarkdownBlock text={item.followupText} role="assistant" /></div>}
+      <div className="space-y-3">
+        {item.segments.map((segment, index) => {
+          if (segment.kind === 'assistant_message') {
+            const hasText = Boolean(segment.text);
+            const hasReasoning = Boolean(segment.reasoning);
+            if (!hasText && !hasReasoning) {
+              return null;
+            }
+            return (
+              <div key={`${segment.key}-${index}`}>
+                {hasText && <MarkdownBlock text={segment.text} role="assistant" />}
+                {hasReasoning && <ReasoningBlock reasoning={segment.reasoning} isUser={false} />}
+              </div>
+            );
+          }
+          return <ToolCardView key={`${segment.key}-${index}`} card={segment.card} />;
+        })}
+      </div>
     </div>
   );
 }
@@ -212,14 +219,14 @@ export function ChatThread({ events, isSending, className }: ChatThreadProps) {
   return (
     <div className={cn('space-y-5', className)}>
       {timeline.map((item) => {
-        const role = item.kind === 'assistant_flow' ? 'assistant' : item.role;
+        const role = item.kind === 'assistant_turn' ? 'assistant' : item.role;
         const isUser = role === 'user';
         return (
           <div key={item.key} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
             {!isUser && <RoleAvatar role={role} />}
             <div className={cn('max-w-[88%] min-w-[280px] space-y-2', isUser && 'flex flex-col items-end')}>
-              {item.kind === 'assistant_flow' ? (
-                <AssistantFlowCard item={item} />
+              {item.kind === 'assistant_turn' ? (
+                <AssistantTurnCard item={item} />
               ) : (
                 <MessageCard message={item.message} />
               )}

package/src/components/chat/useChatStreamController.ts

@@ -0,0 +1,268 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { SessionEventView } from '@/api/types';
+import { sendChatTurnStream } from '@/api/config';
+
+type PendingChatMessage = {
+  id: number;
+  message: string;
+  sessionKey: string;
+  agentId: string;
+};
+
+type SendMessageParams = {
+  message: string;
+  sessionKey: string;
+  agentId: string;
+  restoreDraftOnError?: boolean;
+};
+
+type UseChatStreamControllerParams = {
+  nextOptimisticUserSeq: number;
+  selectedSessionKeyRef: MutableRefObject<string | null>;
+  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
+  setDraft: Dispatch<SetStateAction<string>>;
+  refetchSessions: () => Promise<unknown>;
+  refetchHistory: () => Promise<unknown>;
+};
+
+type StreamSetters = {
+  setOptimisticUserEvent: Dispatch<SetStateAction<SessionEventView | null>>;
+  setStreamingSessionEvents: Dispatch<SetStateAction<SessionEventView[]>>;
+  setStreamingAssistantText: Dispatch<SetStateAction<string>>;
+  setStreamingAssistantTimestamp: Dispatch<SetStateAction<string | null>>;
+  setIsSending: Dispatch<SetStateAction<boolean>>;
+  setIsAwaitingAssistantOutput: Dispatch<SetStateAction<boolean>>;
+};
+
+function clearStreamingState(setters: StreamSetters) {
+  setters.setIsSending(false);
+  setters.setOptimisticUserEvent(null);
+  setters.setStreamingSessionEvents([]);
+  setters.setStreamingAssistantText('');
+  setters.setStreamingAssistantTimestamp(null);
+  setters.setIsAwaitingAssistantOutput(false);
+}
+
+async function executeSendRun(params: {
+  item: PendingChatMessage;
+  runId: number;
+  runIdRef: MutableRefObject<number>;
+  nextOptimisticUserSeq: number;
+  selectedSessionKeyRef: MutableRefObject<string | null>;
+  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
+  setDraft: Dispatch<SetStateAction<string>>;
+  refetchSessions: () => Promise<unknown>;
+  refetchHistory: () => Promise<unknown>;
+  restoreDraftOnError?: boolean;
+  setters: StreamSetters;
+}): Promise<void> {
+  const {
+    item,
+    runId,
+    runIdRef,
+    nextOptimisticUserSeq,
+    selectedSessionKeyRef,
+    setSelectedSessionKey,
+    setDraft,
+    refetchSessions,
+    refetchHistory,
+    restoreDraftOnError,
+    setters
+  } = params;
+
+  setters.setStreamingSessionEvents([]);
+  setters.setStreamingAssistantText('');
+  setters.setStreamingAssistantTimestamp(null);
+  setters.setOptimisticUserEvent({
+    seq: nextOptimisticUserSeq,
+    type: 'message.user.optimistic',
+    timestamp: new Date().toISOString(),
+    message: {
+      role: 'user',
+      content: item.message,
+      timestamp: new Date().toISOString()
+    }
+  });
+  setters.setIsSending(true);
+  setters.setIsAwaitingAssistantOutput(true);
+
+  try {
+    let streamText = '';
+    const streamTimestamp = new Date().toISOString();
+    setters.setStreamingAssistantTimestamp(streamTimestamp);
+
+    const result = await sendChatTurnStream({
+      message: item.message,
+      sessionKey: item.sessionKey,
+      agentId: item.agentId,
+      channel: 'ui',
+      chatId: 'web-ui'
+    }, {
+      onReady: (event) => {
+        if (runId !== runIdRef.current) {
+          return;
+        }
+        if (event.sessionKey) {
+          setSelectedSessionKey((prev) => prev === event.sessionKey ? prev : event.sessionKey);
+        }
+      },
+      onDelta: (event) => {
+        if (runId !== runIdRef.current) {
+          return;
+        }
+        streamText += event.delta;
+        setters.setStreamingAssistantText(streamText);
+        setters.setIsAwaitingAssistantOutput(false);
+      },
+      onSessionEvent: (event) => {
+        if (runId !== runIdRef.current) {
+          return;
+        }
+        if (event.data.message?.role === 'user') {
+          setters.setOptimisticUserEvent(null);
+        }
+        setters.setStreamingSessionEvents((prev) => {
+          const next = [...prev];
+          const hit = next.findIndex((streamEvent) => streamEvent.seq === event.data.seq);
+          if (hit >= 0) {
+            next[hit] = event.data;
+          } else {
+            next.push(event.data);
+          }
+          return next;
+        });
+        if (event.data.message?.role === 'assistant') {
+          // Reset delta accumulator once assistant event lands in session timeline.
+          streamText = '';
+          setters.setStreamingAssistantText('');
+          setters.setIsAwaitingAssistantOutput(false);
+        }
+      }
+    });
+    if (runId !== runIdRef.current) {
+      return;
+    }
+    setters.setOptimisticUserEvent(null);
+    if (result.sessionKey !== item.sessionKey) {
+      setSelectedSessionKey(result.sessionKey);
+    }
+    await refetchSessions();
+    const activeSessionKey = selectedSessionKeyRef.current;
+    if (!activeSessionKey || activeSessionKey === item.sessionKey || activeSessionKey === result.sessionKey) {
+      await refetchHistory();
+    }
+    setters.setStreamingSessionEvents([]);
+    setters.setStreamingAssistantText('');
+    setters.setStreamingAssistantTimestamp(null);
+    setters.setIsAwaitingAssistantOutput(false);
+    setters.setIsSending(false);
+  } catch {
+    if (runId !== runIdRef.current) {
+      return;
+    }
+    runIdRef.current += 1;
+    clearStreamingState(setters);
+    if (restoreDraftOnError) {
+      setDraft((prev) => prev.trim().length === 0 ? item.message : prev);
+    }
+  }
+}
+
+export function useChatStreamController(params: UseChatStreamControllerParams) {
+  const [optimisticUserEvent, setOptimisticUserEvent] = useState<SessionEventView | null>(null);
+  const [streamingSessionEvents, setStreamingSessionEvents] = useState<SessionEventView[]>([]);
+  const [streamingAssistantText, setStreamingAssistantText] = useState('');
+  const [streamingAssistantTimestamp, setStreamingAssistantTimestamp] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState(false);
+  const [isAwaitingAssistantOutput, setIsAwaitingAssistantOutput] = useState(false);
+  const [queuedMessages, setQueuedMessages] = useState<PendingChatMessage[]>([]);
+
+  const streamRunIdRef = useRef(0);
+  const queueIdRef = useRef(0);
+
+  const resetStreamState = useCallback(() => {
+    streamRunIdRef.current += 1;
+    setQueuedMessages([]);
+    clearStreamingState({
+      setOptimisticUserEvent,
+      setStreamingSessionEvents,
+      setStreamingAssistantText,
+      setStreamingAssistantTimestamp,
+      setIsSending,
+      setIsAwaitingAssistantOutput
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      streamRunIdRef.current += 1;
+    };
+  }, []);
+
+  const runSend = useCallback(
+    async (item: PendingChatMessage, options?: { restoreDraftOnError?: boolean }) => {
+      streamRunIdRef.current += 1;
+      await executeSendRun({
+        item,
+        runId: streamRunIdRef.current,
+        runIdRef: streamRunIdRef,
+        nextOptimisticUserSeq: params.nextOptimisticUserSeq,
+        selectedSessionKeyRef: params.selectedSessionKeyRef,
+        setSelectedSessionKey: params.setSelectedSessionKey,
+        setDraft: params.setDraft,
+        refetchSessions: params.refetchSessions,
+        refetchHistory: params.refetchHistory,
+        restoreDraftOnError: options?.restoreDraftOnError,
+        setters: {
+          setOptimisticUserEvent,
+          setStreamingSessionEvents,
+          setStreamingAssistantText,
+          setStreamingAssistantTimestamp,
+          setIsSending,
+          setIsAwaitingAssistantOutput
+        }
+      });
+    },
+    [params]
+  );
+
+  useEffect(() => {
+    if (isSending || queuedMessages.length === 0) {
+      return;
+    }
+    const [next, ...rest] = queuedMessages;
+    setQueuedMessages(rest);
+    void runSend(next, { restoreDraftOnError: true });
+  }, [isSending, queuedMessages, runSend]);
+
+  const sendMessage = useCallback(
+    async (payload: SendMessageParams) => {
+      queueIdRef.current += 1;
+      const item: PendingChatMessage = {
+        id: queueIdRef.current,
+        message: payload.message,
+        sessionKey: payload.sessionKey,
+        agentId: payload.agentId
+      };
+      if (isSending) {
+        setQueuedMessages((prev) => [...prev, item]);
+        return;
+      }
+      await runSend(item, { restoreDraftOnError: payload.restoreDraftOnError });
+    },
+    [isSending, runSend]
+  );
+
+  return {
+    optimisticUserEvent,
+    streamingSessionEvents,
+    streamingAssistantText,
+    streamingAssistantTimestamp,
+    isSending,
+    isAwaitingAssistantOutput,
+    queuedCount: queuedMessages.length,
+    sendMessage,
+    resetStreamState
+  };
+}

package/src/lib/chat-message.ts

@@ -19,19 +19,28 @@ export type ChatTimelineMessageItem = {
   message: SessionMessageView;
 };
 
-export type ChatTimelineAssistantFlowItem = {
-  kind: 'assistant_flow';
+export type ChatTimelineAssistantTurnSegment =
+  | {
+      kind: 'assistant_message';
+      key: string;
+      text: string;
+      reasoning: string;
+    }
+  | {
+      kind: 'tool_card';
+      key: string;
+      card: ToolCard;
+    };
+
+export type ChatTimelineAssistantTurnItem = {
+  kind: 'assistant_turn';
   key: string;
   role: 'assistant';
   timestamp: string;
-  primaryText: string;
-  primaryReasoning: string;
-  followupText: string;
-  followupReasoning: string;
-  toolCards: ToolCard[];
+  segments: ChatTimelineAssistantTurnSegment[];
 };
 
-export type ChatTimelineItem = ChatTimelineMessageItem | ChatTimelineAssistantFlowItem;
+export type ChatTimelineItem = ChatTimelineMessageItem | ChatTimelineAssistantTurnItem;
 
 const TOOL_DETAIL_FIELDS = ['cmd', 'command', 'query', 'q', 'path', 'url', 'to', 'channel', 'agentId', 'sessionKey'];
 
@@ -263,17 +272,54 @@ export function buildChatTimeline(events: SessionEventView[]): ChatTimelineItem[
     });
 
   const timeline: ChatTimelineItem[] = [];
-  let activeFlow:
+  let activeTurn:
     | {
-        item: ChatTimelineAssistantFlowItem;
+        item: ChatTimelineAssistantTurnItem;
         cardByCallId: Map<string, ToolCard>;
-        pendingCallIds: Set<string>;
-        awaitingFollowup: boolean;
       }
     | null = null;
 
-  const closeActiveFlow = () => {
-    activeFlow = null;
+  const closeActiveTurn = () => {
+    activeTurn = null;
+  };
+
+  const ensureActiveTurn = (eventKey: string, timestamp: string) => {
+    if (activeTurn) {
+      activeTurn.item.timestamp = timestamp;
+      return activeTurn;
+    }
+    const item: ChatTimelineAssistantTurnItem = {
+      kind: 'assistant_turn',
+      key: `turn-${eventKey}`,
+      role: 'assistant',
+      timestamp,
+      segments: []
+    };
+    timeline.push(item);
+    activeTurn = {
+      item,
+      cardByCallId: new Map<string, ToolCard>()
+    };
+    return activeTurn;
+  };
+
+  const pushAssistantMessageSegment = (
+    target: { item: ChatTimelineAssistantTurnItem },
+    eventKey: string,
+    message: SessionMessageView
+  ) => {
+    const text = extractMessageText(message.content).trim();
+    const reasoning =
+      typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
+    if (!text && !reasoning) {
+      return;
+    }
+    target.item.segments.push({
+      kind: 'assistant_message',
+      key: `assistant-${eventKey}-${target.item.segments.length}`,
+      text,
+      reasoning
+    });
   };
 
   for (const event of normalized) {
@@ -287,80 +333,58 @@ export function buildChatTimeline(events: SessionEventView[]): ChatTimelineItem[
       typeof message.timestamp === 'string' && message.timestamp
         ? message.timestamp
         : event.timestamp;
+    const eventKey = `${event._seq}-${event._idx}`;
+
+    if (role === 'assistant') {
+      const turn = ensureActiveTurn(eventKey, timestamp);
+      pushAssistantMessageSegment(turn, eventKey, message);
+      if (!hasToolCalls(message)) {
+        continue;
+      }
 
-    if (role === 'assistant' && hasToolCalls(message)) {
-      closeActiveFlow();
       const toolCards = buildToolCallCards(message);
-      const item: ChatTimelineAssistantFlowItem = {
-        kind: 'assistant_flow',
-        key: `flow-${event._seq}-${event._idx}`,
-        role: 'assistant',
-        timestamp,
-        primaryText: extractMessageText(message.content).trim(),
-        primaryReasoning:
-          typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '',
-        followupText: '',
-        followupReasoning: '',
-        toolCards
-      };
-
-      const cardByCallId = new Map<string, ToolCard>();
-      const pendingCallIds = new Set<string>();
       for (const card of toolCards) {
+        turn.item.segments.push({
+          kind: 'tool_card',
+          key: `tool-call-${eventKey}-${turn.item.segments.length}`,
+          card
+        });
         if (typeof card.callId === 'string' && card.callId.trim()) {
-          cardByCallId.set(card.callId, card);
-          pendingCallIds.add(card.callId);
+          turn.cardByCallId.set(card.callId, card);
         }
       }
-
-      timeline.push(item);
-      activeFlow = {
-        item,
-        cardByCallId,
-        pendingCallIds,
-        awaitingFollowup: pendingCallIds.size === 0
-      };
       continue;
     }
 
     if (role === 'tool') {
+      const turn = ensureActiveTurn(eventKey, timestamp);
       const callId =
         typeof message.tool_call_id === 'string' && message.tool_call_id.trim()
           ? message.tool_call_id.trim()
           : undefined;
-      if (activeFlow && callId && activeFlow.cardByCallId.has(callId)) {
-        const card = activeFlow.cardByCallId.get(callId)!;
+      if (callId && turn.cardByCallId.has(callId)) {
+        const card = turn.cardByCallId.get(callId)!;
         const resultText = extractMessageText(message.content).trim();
         card.text = appendText(card.text ?? '', resultText);
         card.hasResult = true;
         if (typeof message.name === 'string' && message.name.trim()) {
           card.name = message.name.trim();
         }
-        activeFlow.pendingCallIds.delete(callId);
-        activeFlow.awaitingFollowup = activeFlow.pendingCallIds.size === 0;
-        activeFlow.item.timestamp = timestamp;
+        turn.item.timestamp = timestamp;
         continue;
       }
 
-      timeline.push({
-        kind: 'message',
-        key: `message-${event._seq}-${event._idx}`,
-        role,
-        timestamp,
-        message
+      turn.item.segments.push({
+        kind: 'tool_card',
+        key: `tool-result-${eventKey}-${turn.item.segments.length}`,
+        card: {
+          kind: 'result',
+          name: toToolName(message.name),
+          text: extractMessageText(message.content).trim(),
+          callId,
+          hasResult: true
+        }
       });
-      closeActiveFlow();
-      continue;
-    }
-
-    if (role === 'assistant' && activeFlow && activeFlow.awaitingFollowup && !hasToolCalls(message)) {
-      const text = extractMessageText(message.content).trim();
-      const reasoning =
-        typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
-      activeFlow.item.followupText = appendText(activeFlow.item.followupText, text);
-      activeFlow.item.followupReasoning = appendText(activeFlow.item.followupReasoning, reasoning);
-      activeFlow.item.timestamp = timestamp;
-      closeActiveFlow();
       continue;
     }
 
@@ -371,7 +395,7 @@ export function buildChatTimeline(events: SessionEventView[]): ChatTimelineItem[
       timestamp,
       message
     });
-    closeActiveFlow();
+    closeActiveTurn();
   }
 
   return timeline;