@nextclaw/ui 0.5.22 → 0.5.24

package/src/components/chat/ChatPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { SessionEntryView, SessionMessageView } from '@/api/types';
-import { useConfig, useDeleteSession, useSendChatTurn, useSessionHistory, useSessions } from '@/hooks/useConfig';
+import { sendChatTurnStream } from '@/api/config';
+import { useConfig, useDeleteSession, useSessionHistory, useSessions } from '@/hooks/useConfig';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -68,15 +69,17 @@ export function ChatPage() {
   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 [isSending, setIsSending] = useState(false);
 
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const threadRef = useRef<HTMLDivElement | null>(null);
+  const streamRunIdRef = useRef(0);
 
   const configQuery = useConfig();
   const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
   const historyQuery = useSessionHistory(selectedSessionKey, 300);
   const deleteSession = useDeleteSession();
-  const sendChatTurn = useSendChatTurn();
 
   const agentOptions = useMemo(() => {
     const list = configQuery.data?.agents.list ?? [];
@@ -96,12 +99,20 @@ export function ChatPage() {
   );
 
   const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
+  const isGenerating = isSending;
   const mergedMessages = useMemo(() => {
-    if (!optimisticUserMessage) {
+    if (!optimisticUserMessage && !streamingAssistantMessage) {
       return historyMessages;
     }
-    return [...historyMessages, optimisticUserMessage];
-  }, [historyMessages, optimisticUserMessage]);
+    const next = [...historyMessages];
+    if (optimisticUserMessage) {
+      next.push(optimisticUserMessage);
+    }
+    if (streamingAssistantMessage) {
+      next.push(streamingAssistantMessage);
+    }
+    return next;
+  }, [historyMessages, optimisticUserMessage, streamingAssistantMessage]);
 
   useEffect(() => {
     if (!selectedSessionKey && sessions.length > 0) {
@@ -129,9 +140,18 @@ export function ChatPage() {
       return;
     }
     element.scrollTop = element.scrollHeight;
-  }, [mergedMessages.length, sendChatTurn.isPending, selectedSessionKey]);
+  }, [mergedMessages, isSending, selectedSessionKey]);
+
+  useEffect(() => {
+    return () => {
+      streamRunIdRef.current += 1;
+    };
+  }, []);
 
   const createNewSession = () => {
+    streamRunIdRef.current += 1;
+    setIsSending(false);
+    setStreamingAssistantMessage(null);
     const next = buildNewSessionKey(selectedAgentId);
     setSelectedSessionKey(next);
     setOptimisticUserMessage(null);
@@ -153,6 +173,9 @@ export function ChatPage() {
       { key: selectedSessionKey },
       {
         onSuccess: async () => {
+          streamRunIdRef.current += 1;
+          setIsSending(false);
+          setStreamingAssistantMessage(null);
           setSelectedSessionKey(null);
           setOptimisticUserMessage(null);
           await sessionsQuery.refetch();
@@ -163,10 +186,12 @@ export function ChatPage() {
 
   const handleSend = async () => {
     const message = draft.trim();
-    if (!message || sendChatTurn.isPending) {
+    if (!message || isGenerating) {
       return;
     }
 
+    streamRunIdRef.current += 1;
+    setStreamingAssistantMessage(null);
     const hadActiveSession = Boolean(selectedSessionKey);
     const sessionKey = selectedSessionKey ?? buildNewSessionKey(selectedAgentId);
     if (!selectedSessionKey) {
@@ -178,17 +203,43 @@ export function ChatPage() {
       content: message,
       timestamp: new Date().toISOString()
     });
+    setIsSending(true);
 
     try {
-      const result = await sendChatTurn.mutateAsync({
-        data: {
-          message,
-          sessionKey,
-          agentId: selectedAgentId,
-          channel: 'ui',
-          chatId: 'web-ui'
+      const runId = streamRunIdRef.current;
+      let streamText = '';
+      const streamTimestamp = new Date().toISOString();
+
+      const result = await sendChatTurnStream({
+        message,
+        sessionKey,
+        agentId: selectedAgentId,
+        channel: 'ui',
+        chatId: 'web-ui'
+      }, {
+        onReady: (event) => {
+          if (runId !== streamRunIdRef.current) {
+            return;
+          }
+          if (event.sessionKey && event.sessionKey !== selectedSessionKey) {
+            setSelectedSessionKey(event.sessionKey);
+          }
+        },
+        onDelta: (event) => {
+          if (runId !== streamRunIdRef.current) {
+            return;
+          }
+          streamText += event.delta;
+          setStreamingAssistantMessage({
+            role: 'assistant',
+            content: streamText,
+            timestamp: streamTimestamp
+          });
         }
       });
+      if (runId !== streamRunIdRef.current) {
+        return;
+      }
       setOptimisticUserMessage(null);
       if (result.sessionKey !== sessionKey) {
         setSelectedSessionKey(result.sessionKey);
@@ -197,7 +248,12 @@ export function ChatPage() {
       if (hadActiveSession) {
         await historyQuery.refetch();
       }
+      setStreamingAssistantMessage(null);
+      setIsSending(false);
     } catch {
+      streamRunIdRef.current += 1;
+      setIsSending(false);
+      setStreamingAssistantMessage(null);
       setOptimisticUserMessage(null);
       setDraft(message);
     }
@@ -335,7 +391,7 @@ export function ChatPage() {
                 {mergedMessages.length === 0 ? (
                   <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
                 ) : (
-                  <ChatThread messages={mergedMessages} isSending={sendChatTurn.isPending} />
+                  <ChatThread messages={mergedMessages} isSending={isSending && !streamingAssistantMessage} />
                 )}
               </>
             )}
@@ -354,7 +410,7 @@ export function ChatPage() {
                 }}
                 placeholder={t('chatInputPlaceholder')}
                 className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-2 py-1.5 text-gray-800 placeholder:text-gray-400"
-                disabled={sendChatTurn.isPending}
+                disabled={isGenerating}
               />
               <div className="flex items-center justify-between px-2 pb-1">
                 <div className="text-[11px] text-gray-400">{t('chatInputHint')}</div>
@@ -362,10 +418,10 @@ export function ChatPage() {
                   size="sm"
                   className="rounded-lg"
                   onClick={() => void handleSend()}
-                  disabled={sendChatTurn.isPending || draft.trim().length === 0}
+                  disabled={isGenerating || draft.trim().length === 0}
                 >
                   <Send className="h-3.5 w-3.5 mr-1.5" />
-                  {sendChatTurn.isPending ? t('chatSending') : t('chatSend')}
+                  {isGenerating ? t('chatSending') : t('chatSend')}
                 </Button>
               </div>
             </div>

package/src/components/chat/ChatThread.tsx

@@ -1,7 +1,14 @@
 import { useMemo } from 'react';
 import type { SessionMessageView } from '@/api/types';
 import { cn } from '@/lib/utils';
-import { extractMessageText, extractToolCards, groupChatMessages, type ChatRole, type ToolCard } from '@/lib/chat-message';
+import {
+  combineToolCallAndResults,
+  extractMessageText,
+  extractToolCards,
+  groupChatMessages,
+  type ChatRole,
+  type ToolCard
+} from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
@@ -101,6 +108,7 @@ function ToolCardView({ card }: { card: ToolCard }) {
   const output = card.text?.trim() ?? '';
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes('\n');
   const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}…` : output;
+  const showOutputSection = card.kind === 'result' || card.hasResult;
 
   return (
     <div className="rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5">
@@ -112,7 +120,7 @@ function ToolCardView({ card }: { card: ToolCard }) {
       {card.detail && (
         <div className="mt-1 text-[11px] text-amber-800/90 font-mono break-words">{card.detail}</div>
       )}
-      {card.kind === 'result' && (
+      {showOutputSection && (
         <div className="mt-2">
           {!output ? (
             <div className="text-[11px] text-amber-700/80">{t('chatToolNoOutput')}</div>
@@ -175,7 +183,8 @@ function MessageCard({ message, role }: { message: SessionMessageView; role: Cha
 }
 
 export function ChatThread({ messages, isSending, className }: ChatThreadProps) {
-  const groups = useMemo(() => groupChatMessages(messages), [messages]);
+  const preparedMessages = useMemo(() => combineToolCallAndResults(messages), [messages]);
+  const groups = useMemo(() => groupChatMessages(preparedMessages), [preparedMessages]);
 
   return (
     <div className={cn('space-y-5', className)}>

package/src/lib/chat-message.ts

@@ -8,6 +8,7 @@ export type ToolCard = {
   detail?: string;
   text?: string;
   callId?: string;
+  hasResult?: boolean;
 };
 
 export type GroupedChatMessage = {
@@ -158,11 +159,15 @@ export function extractToolCards(message: SessionMessageView): ToolCard[] {
     const fn = isRecord(call.function) ? call.function : null;
     const name = toToolName(fn?.name ?? call.name);
     const args = fn?.arguments ?? call.arguments;
+    const resultText = typeof call.result_text === 'string' ? call.result_text.trim() : '';
+    const hasResult = call.has_result === true || typeof call.result_text === 'string';
     cards.push({
       kind: 'call',
       name,
       detail: summarizeToolArgs(args),
-      callId: typeof call.id === 'string' ? call.id : undefined
+      callId: typeof call.id === 'string' ? call.id : undefined,
+      text: resultText,
+      hasResult
     });
   }
 
@@ -173,13 +178,86 @@ export function extractToolCards(message: SessionMessageView): ToolCard[] {
       kind: 'result',
       name: toToolName(message.name ?? cards[0]?.name),
       text,
-      callId: typeof message.tool_call_id === 'string' ? message.tool_call_id : undefined
+      callId: typeof message.tool_call_id === 'string' ? message.tool_call_id : undefined,
+      hasResult: true
     });
   }
 
   return cards;
 }
 
+type ToolResultBucket = {
+  name?: string;
+  texts: string[];
+};
+
+function cloneMessageForMerge(message: SessionMessageView): SessionMessageView {
+  return {
+    ...message,
+    tool_calls: Array.isArray(message.tool_calls)
+      ? message.tool_calls.map((call) => (isRecord(call) ? { ...call } : call))
+      : message.tool_calls
+  };
+}
+
+export function combineToolCallAndResults(messages: SessionMessageView[]): SessionMessageView[] {
+  const cloned = messages.map(cloneMessageForMerge);
+  const resultByCallId = new Map<string, ToolResultBucket>();
+
+  for (const message of cloned) {
+    if (normalizeChatRole(message) !== 'tool') {
+      continue;
+    }
+    if (typeof message.tool_call_id !== 'string' || !message.tool_call_id.trim()) {
+      continue;
+    }
+
+    const callId = message.tool_call_id.trim();
+    const text = extractMessageText(message.content).trim();
+    const existing = resultByCallId.get(callId) ?? { texts: [] };
+    if (typeof message.name === 'string' && message.name.trim()) {
+      existing.name = message.name.trim();
+    }
+    existing.texts.push(text);
+    resultByCallId.set(callId, existing);
+  }
+
+  const consumedCallIds = new Set<string>();
+
+  for (const message of cloned) {
+    if (normalizeChatRole(message) !== 'assistant' || !Array.isArray(message.tool_calls)) {
+      continue;
+    }
+
+    message.tool_calls = message.tool_calls.map((call) => {
+      if (!isRecord(call) || typeof call.id !== 'string') {
+        return call;
+      }
+      const result = resultByCallId.get(call.id);
+      if (!result) {
+        return call;
+      }
+      consumedCallIds.add(call.id);
+      return {
+        ...call,
+        result_text: result.texts.filter(Boolean).join('\n\n'),
+        has_result: true,
+        result_name: result.name
+      };
+    }) as Array<Record<string, unknown>>;
+  }
+
+  return cloned.filter((message) => {
+    if (normalizeChatRole(message) !== 'tool') {
+      return true;
+    }
+    if (typeof message.tool_call_id !== 'string' || !message.tool_call_id.trim()) {
+      return true;
+    }
+    return !consumedCallIds.has(message.tool_call_id.trim());
+  });
+}
+
 export function groupChatMessages(messages: SessionMessageView[]): GroupedChatMessage[] {
   const groups: GroupedChatMessage[] = [];
   let lastTs = 0;