@nextclaw/ui 0.5.26 → 0.5.28

package/src/components/chat/ChatPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { SessionEntryView, SessionMessageView } from '@/api/types';
+import type { SessionEntryView, SessionEventView } from '@/api/types';
 import { sendChatTurnStream } from '@/api/config';
 import { useConfig, useDeleteSession, useSessionHistory, useSessions } from '@/hooks/useConfig';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
@@ -9,6 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
 import { ChatThread } from '@/components/chat/ChatThread';
 import { cn } from '@/lib/utils';
+import { buildFallbackEventsFromMessages } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
 import { MessageSquareText, Plus, RefreshCw, Search, Send, Trash2 } from 'lucide-react';
 
@@ -93,8 +94,9 @@ export function ChatPage() {
   const [draft, setDraft] = useState('');
   const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
   const [selectedAgentId, setSelectedAgentId] = useState('main');
-  const [optimisticUserMessage, setOptimisticUserMessage] = useState<SessionMessageView | null>(null);
-  const [streamingAssistantMessage, setStreamingAssistantMessage] = useState<SessionMessageView | null>(null);
+  const [streamingSessionEvents, setStreamingSessionEvents] = useState<SessionEventView[]>([]);
+  const [streamingAssistantText, setStreamingAssistantText] = useState('');
+  const [streamingAssistantTimestamp, setStreamingAssistantTimestamp] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
   const [queuedMessages, setQueuedMessages] = useState<PendingChatMessage[]>([]);
 
@@ -143,20 +145,32 @@ export function ChatPage() {
     [selectedSessionKey, sessions]
   );
 
-  const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
-  const mergedMessages = useMemo(() => {
-    if (!optimisticUserMessage && !streamingAssistantMessage) {
-      return historyMessages;
-    }
-    const next = [...historyMessages];
-    if (optimisticUserMessage) {
-      next.push(optimisticUserMessage);
-    }
-    if (streamingAssistantMessage) {
-      next.push(streamingAssistantMessage);
+  const historyData = historyQuery.data;
+  const historyMessages = historyData?.messages ?? [];
+  const historyEvents =
+    historyData?.events && historyData.events.length > 0
+      ? historyData.events
+      : buildFallbackEventsFromMessages(historyMessages);
+  const mergedEvents = useMemo(() => {
+    const next = [...historyEvents, ...streamingSessionEvents];
+    if (streamingAssistantText.trim()) {
+      const maxSeq = next.reduce((max, event) => {
+        const seq = Number.isFinite(event.seq) ? event.seq : 0;
+        return seq > max ? seq : max;
+      }, 0);
+      next.push({
+        seq: maxSeq + 1,
+        type: 'stream.assistant_delta',
+        timestamp: streamingAssistantTimestamp ?? new Date().toISOString(),
+        message: {
+          role: 'assistant',
+          content: streamingAssistantText,
+          timestamp: streamingAssistantTimestamp ?? new Date().toISOString()
+        }
+      });
     }
     return next;
-  }, [historyMessages, optimisticUserMessage, streamingAssistantMessage]);
+  }, [historyEvents, streamingAssistantText, streamingAssistantTimestamp, streamingSessionEvents]);
 
   useEffect(() => {
     if (!selectedSessionKey && filteredSessions.length > 0) {
@@ -188,7 +202,7 @@ export function ChatPage() {
       return;
     }
     element.scrollTop = element.scrollHeight;
-  }, [mergedMessages, isSending, selectedSessionKey]);
+  }, [mergedEvents, isSending, selectedSessionKey]);
 
   useEffect(() => {
     return () => {
@@ -200,10 +214,11 @@ export function ChatPage() {
     streamRunIdRef.current += 1;
     setIsSending(false);
     setQueuedMessages([]);
-    setStreamingAssistantMessage(null);
+    setStreamingSessionEvents([]);
+    setStreamingAssistantText('');
+    setStreamingAssistantTimestamp(null);
     const next = buildNewSessionKey(selectedAgentId);
     setSelectedSessionKey(next);
-    setOptimisticUserMessage(null);
   };
 
   const handleDeleteSession = async () => {
@@ -225,9 +240,10 @@ export function ChatPage() {
           streamRunIdRef.current += 1;
           setIsSending(false);
           setQueuedMessages([]);
-          setStreamingAssistantMessage(null);
+          setStreamingSessionEvents([]);
+          setStreamingAssistantText('');
+          setStreamingAssistantTimestamp(null);
           setSelectedSessionKey(null);
-          setOptimisticUserMessage(null);
           await sessionsQuery.refetch();
         }
       }
@@ -238,17 +254,15 @@ export function ChatPage() {
     streamRunIdRef.current += 1;
     const runId = streamRunIdRef.current;
 
-    setStreamingAssistantMessage(null);
-    setOptimisticUserMessage({
-      role: 'user',
-      content: item.message,
-      timestamp: new Date().toISOString()
-    });
+    setStreamingSessionEvents([]);
+    setStreamingAssistantText('');
+    setStreamingAssistantTimestamp(null);
     setIsSending(true);
 
     try {
       let streamText = '';
       const streamTimestamp = new Date().toISOString();
+      setStreamingAssistantTimestamp(streamTimestamp);
 
       const result = await sendChatTurnStream({
         message: item.message,
@@ -270,17 +284,30 @@ export function ChatPage() {
             return;
           }
           streamText += event.delta;
-          setStreamingAssistantMessage({
-            role: 'assistant',
-            content: streamText,
-            timestamp: streamTimestamp
+          setStreamingAssistantText(streamText);
+        },
+        onSessionEvent: (event) => {
+          if (runId !== streamRunIdRef.current) {
+            return;
+          }
+          setStreamingSessionEvents((prev) => {
+            const next = [...prev];
+            const hit = next.findIndex((item) => item.seq === event.data.seq);
+            if (hit >= 0) {
+              next[hit] = event.data;
+            } else {
+              next.push(event.data);
+            }
+            return next;
           });
+          if (event.data.message?.role === 'assistant') {
+            setStreamingAssistantText('');
+          }
         }
       });
       if (runId !== streamRunIdRef.current) {
         return;
       }
-      setOptimisticUserMessage(null);
       if (result.sessionKey !== item.sessionKey) {
         setSelectedSessionKey(result.sessionKey);
       }
@@ -289,7 +316,9 @@ export function ChatPage() {
       if (!activeSessionKey || activeSessionKey === item.sessionKey || activeSessionKey === result.sessionKey) {
         await historyQuery.refetch();
       }
-      setStreamingAssistantMessage(null);
+      setStreamingSessionEvents([]);
+      setStreamingAssistantText('');
+      setStreamingAssistantTimestamp(null);
       setIsSending(false);
     } catch {
       if (runId !== streamRunIdRef.current) {
@@ -297,8 +326,9 @@ export function ChatPage() {
       }
       streamRunIdRef.current += 1;
       setIsSending(false);
-      setStreamingAssistantMessage(null);
-      setOptimisticUserMessage(null);
+      setStreamingSessionEvents([]);
+      setStreamingAssistantText('');
+      setStreamingAssistantTimestamp(null);
       if (options?.restoreDraftOnError) {
         setDraft((prev) => prev.trim().length === 0 ? item.message : prev);
       }
@@ -486,10 +516,10 @@ export function ChatPage() {
               <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
             ) : (
               <>
-                {mergedMessages.length === 0 ? (
+                {mergedEvents.length === 0 ? (
                   <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
                 ) : (
-                  <ChatThread messages={mergedMessages} isSending={isSending && !streamingAssistantMessage} />
+                  <ChatThread events={mergedEvents} isSending={isSending && !streamingAssistantText.trim()} />
                 )}
               </>
             )}

package/src/components/chat/ChatThread.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
-import type { SessionMessageView } from '@/api/types';
+import type { SessionEventView, SessionMessageView } from '@/api/types';
 import { cn } from '@/lib/utils';
 import {
-  combineToolCallAndResults,
+  buildChatTimeline,
   extractMessageText,
   extractToolCards,
-  groupChatMessages,
+  normalizeChatRole,
   type ChatRole,
+  type ChatTimelineAssistantFlowItem,
   type ToolCard
 } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
@@ -16,7 +17,7 @@ import remarkGfm from 'remark-gfm';
 import { Bot, Clock3, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
 
 type ChatThreadProps = {
-  messages: SessionMessageView[];
+  events: SessionEventView[];
   isSending: boolean;
   className?: string;
 };
@@ -142,12 +143,26 @@ function ToolCardView({ card }: { card: ToolCard }) {
   );
 }
 
-function MessageCard({ message, role }: { message: SessionMessageView; role: ChatRole }) {
-  const text = extractMessageText(message.content).trim();
+function ReasoningBlock({ reasoning, isUser }: { reasoning: string; isUser: boolean }) {
+  return (
+    <details className="mt-3">
+      <summary className={cn('cursor-pointer text-xs', isUser ? 'text-primary-100' : 'text-gray-500')}>
+        {t('chatReasoning')}
+      </summary>
+      <pre className={cn('mt-2 text-[11px] whitespace-pre-wrap break-words rounded-lg p-2', isUser ? 'bg-primary-700/60' : 'bg-gray-100')}>
+        {reasoning}
+      </pre>
+    </details>
+  );
+}
+
+function MessageCard({ message }: { message: SessionMessageView }) {
+  const role = normalizeChatRole(message);
+  const primaryText = extractMessageText(message.content).trim();
+  const primaryReasoning = typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
   const toolCards = extractToolCards(message);
-  const reasoning = typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
-  const shouldRenderText = Boolean(text) && !(role === 'tool' && toolCards.length > 0);
   const isUser = role === 'user';
+  const shouldRenderPrimaryText = Boolean(primaryText) && !(role === 'tool' && toolCards.length > 0);
 
   return (
     <div
@@ -160,19 +175,10 @@ function MessageCard({ message, role }: { message: SessionMessageView; role: Cha
             : 'bg-orange-50/70 text-gray-900 border-orange-200/80'
       )}
     >
-      {shouldRenderText && <MarkdownBlock text={text} role={role} />}
-      {reasoning && (
-        <details className="mt-3">
-          <summary className={cn('cursor-pointer text-xs', isUser ? 'text-primary-100' : 'text-gray-500')}>
-            {t('chatReasoning')}
-          </summary>
-          <pre className={cn('mt-2 text-[11px] whitespace-pre-wrap break-words rounded-lg p-2', isUser ? 'bg-primary-700/60' : 'bg-gray-100')}>
-            {reasoning}
-          </pre>
-        </details>
-      )}
+      {shouldRenderPrimaryText && <MarkdownBlock text={primaryText} role={role} />}
+      {primaryReasoning && <ReasoningBlock reasoning={primaryReasoning} isUser={isUser} />}
       {toolCards.length > 0 && (
-        <div className="mt-3 space-y-2">
+        <div className={cn('space-y-2', (shouldRenderPrimaryText || primaryReasoning) && 'mt-3')}>
           {toolCards.map((card, index) => (
             <ToolCardView key={`${card.kind}-${card.name}-${card.callId ?? index}`} card={card} />
           ))}
@@ -182,26 +188,46 @@ function MessageCard({ message, role }: { message: SessionMessageView; role: Cha
   );
 }
 
-export function ChatThread({ messages, isSending, className }: ChatThreadProps) {
-  const preparedMessages = useMemo(() => combineToolCallAndResults(messages), [messages]);
-  const groups = useMemo(() => groupChatMessages(preparedMessages), [preparedMessages]);
+function AssistantFlowCard({ item }: { item: ChatTimelineAssistantFlowItem }) {
+  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>
+  );
+}
+
+export function ChatThread({ events, isSending, className }: ChatThreadProps) {
+  const timeline = useMemo(() => buildChatTimeline(events), [events]);
 
   return (
     <div className={cn('space-y-5', className)}>
-      {groups.map((group) => {
-        const isUser = group.role === 'user';
+      {timeline.map((item) => {
+        const role = item.kind === 'assistant_flow' ? 'assistant' : item.role;
+        const isUser = role === 'user';
         return (
-          <div key={group.key} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
-            {!isUser && <RoleAvatar role={group.role} />}
+          <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')}>
-              {group.messages.map((message, index) => (
-                <MessageCard key={`${group.key}-${index}`} message={message} role={group.role} />
-              ))}
+              {item.kind === 'assistant_flow' ? (
+                <AssistantFlowCard item={item} />
+              ) : (
+                <MessageCard message={item.message} />
+              )}
               <div className={cn('text-[11px] px-1', isUser ? 'text-primary-300' : 'text-gray-400')}>
-                {roleTitle(group.role)} · {formatDateTime(group.timestamp)}
+                {roleTitle(role)} · {formatDateTime(item.timestamp)}
               </div>
             </div>
-            {isUser && <RoleAvatar role={group.role} />}
+            {isUser && <RoleAvatar role={role} />}
           </div>
         );
       })}