@nextclaw/ui 0.5.25 → 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,10 +9,12 @@ 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';
 
 const CHAT_SESSION_STORAGE_KEY = 'nextclaw.ui.chat.activeSession';
+const UNKNOWN_CHAT_CHANNEL_KEY = '__unknown_channel__';
 
 function readStoredSessionKey(): string | null {
   if (typeof window === 'undefined') {
@@ -63,6 +65,22 @@ function sessionDisplayName(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
+function resolveChannelFromSessionKey(key: string): string {
+  const separator = key.indexOf(':');
+  if (separator <= 0) {
+    return UNKNOWN_CHAT_CHANNEL_KEY;
+  }
+  const channel = key.slice(0, separator).trim();
+  return channel || UNKNOWN_CHAT_CHANNEL_KEY;
+}
+
+function displayChannelName(channel: string): string {
+  if (channel === UNKNOWN_CHAT_CHANNEL_KEY) {
+    return t('sessionsUnknownChannel');
+  }
+  return channel;
+}
+
 type PendingChatMessage = {
   id: number;
   message: string;
@@ -72,11 +90,13 @@ type PendingChatMessage = {
 
 export function ChatPage() {
   const [query, setQuery] = useState('');
+  const [selectedChannel, setSelectedChannel] = useState('all');
   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[]>([]);
 
@@ -103,31 +123,60 @@ export function ChatPage() {
   }, [configQuery.data?.agents.list]);
 
   const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const channelOptions = useMemo(() => {
+    const unique = new Set<string>();
+    for (const session of sessions) {
+      unique.add(resolveChannelFromSessionKey(session.key));
+    }
+    return Array.from(unique).sort((a, b) => {
+      if (a === UNKNOWN_CHAT_CHANNEL_KEY) return 1;
+      if (b === UNKNOWN_CHAT_CHANNEL_KEY) return -1;
+      return a.localeCompare(b);
+    });
+  }, [sessions]);
+  const filteredSessions = useMemo(() => {
+    if (selectedChannel === 'all') {
+      return sessions;
+    }
+    return sessions.filter((session) => resolveChannelFromSessionKey(session.key) === selectedChannel);
+  }, [selectedChannel, sessions]);
   const selectedSession = useMemo(
     () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
     [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 && sessions.length > 0) {
-      setSelectedSessionKey(sessions[0].key);
+    if (!selectedSessionKey && filteredSessions.length > 0) {
+      setSelectedSessionKey(filteredSessions[0].key);
     }
-  }, [selectedSessionKey, sessions]);
+  }, [filteredSessions, selectedSessionKey]);
 
   useEffect(() => {
     writeStoredSessionKey(selectedSessionKey);
@@ -153,7 +202,7 @@ export function ChatPage() {
       return;
     }
     element.scrollTop = element.scrollHeight;
-  }, [mergedMessages, isSending, selectedSessionKey]);
+  }, [mergedEvents, isSending, selectedSessionKey]);
 
   useEffect(() => {
     return () => {
@@ -165,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 () => {
@@ -190,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();
         }
       }
@@ -203,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,
@@ -235,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);
       }
@@ -254,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) {
@@ -262,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);
       }
@@ -338,6 +403,19 @@ export function ChatPage() {
                 className="pl-8 h-9 rounded-lg text-xs"
               />
             </div>
+            <Select value={selectedChannel} onValueChange={setSelectedChannel}>
+              <SelectTrigger className="h-9 rounded-lg text-xs">
+                <SelectValue placeholder={t('sessionsAllChannels')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('sessionsAllChannels')}</SelectItem>
+                {channelOptions.map((channel) => (
+                  <SelectItem key={channel} value={channel}>
+                    {displayChannelName(channel)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <div className="grid grid-cols-2 gap-2">
               <Button variant="outline" size="sm" className="rounded-lg" onClick={() => sessionsQuery.refetch()}>
                 <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', sessionsQuery.isFetching && 'animate-spin')} />
@@ -353,14 +431,14 @@ export function ChatPage() {
           <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
             {sessionsQuery.isLoading ? (
               <div className="text-sm text-gray-500 p-4">{t('sessionsLoading')}</div>
-            ) : sessions.length === 0 ? (
+            ) : filteredSessions.length === 0 ? (
               <div className="p-5 m-2 rounded-xl border border-dashed border-gray-200 text-center text-sm text-gray-500">
                 <MessageSquareText className="h-7 w-7 mx-auto mb-2 text-gray-300" />
                 {t('sessionsEmpty')}
               </div>
             ) : (
               <div className="space-y-1">
-                {sessions.map((session) => {
+                {filteredSessions.map((session) => {
                   const active = selectedSessionKey === session.key;
                   return (
                     <button
@@ -387,8 +465,9 @@ export function ChatPage() {
         </aside>
 
         <section className="flex-1 min-h-0 rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-50/60 to-white shadow-card flex flex-col overflow-hidden">
-          <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm flex flex-wrap items-center gap-3">
-            <div className="min-w-[220px] max-w-[320px]">
+          <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm">
+            <div className="grid gap-3 lg:grid-cols-[minmax(220px,300px)_minmax(0,1fr)_auto] items-end">
+              <div className="min-w-0">
               <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
               <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
                 <SelectTrigger className="h-9 rounded-lg">
@@ -404,23 +483,24 @@ export function ChatPage() {
               </Select>
             </div>
 
-            <div className="flex-1 min-w-[260px]">
+              <div className="min-w-0">
               <div className="text-[11px] text-gray-500 mb-1">{t('chatSessionLabel')}</div>
               <div className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-xs text-gray-600 flex items-center truncate">
                 {selectedSessionKey ?? t('chatNoSession')}
               </div>
             </div>
 
-            <Button
-              variant="outline"
-              size="sm"
-              className="rounded-lg self-end"
-              onClick={handleDeleteSession}
-              disabled={!selectedSession || deleteSession.isPending}
-            >
-              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
-              {t('chatDeleteSession')}
-            </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="rounded-lg"
+                onClick={handleDeleteSession}
+                disabled={!selectedSession || deleteSession.isPending}
+              >
+                <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+                {t('chatDeleteSession')}
+              </Button>
+            </div>
           </div>
 
           <div ref={threadRef} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
@@ -436,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>
         );
       })}