@nextclaw/ui 0.5.46 → 0.5.48

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/components/layout/Sidebar.tsx

@@ -30,7 +30,8 @@ export function Sidebar() {
     setTheme(nextTheme);
   };
 
-  const navItems = [
+  // Core navigation items - primary features
+  const coreNavItems = [
     {
       target: '/chat',
       label: t('chat'),
@@ -51,6 +52,20 @@ export function Sidebar() {
       label: t('channels'),
       icon: MessageSquare,
     },
+    {
+      target: '/cron',
+      label: t('cron'),
+      icon: AlarmClock,
+    },
+    {
+      target: '/marketplace/skills',
+      label: t('marketplaceFilterSkills'),
+      icon: BrainCircuit,
+    }
+  ];
+
+  // Advanced navigation items - secondary features
+  const advancedNavItems = [
     {
       target: '/runtime',
       label: t('runtime'),
@@ -61,11 +76,6 @@ export function Sidebar() {
       label: t('sessions'),
       icon: History,
     },
-    {
-      target: '/cron',
-      label: t('cron'),
-      icon: AlarmClock,
-    },
     {
       target: '/secrets',
       label: t('secrets'),
@@ -75,11 +85,6 @@ export function Sidebar() {
       target: '/marketplace/plugins',
       label: t('marketplaceFilterPlugins'),
       icon: Plug,
-    },
-    {
-      target: '/marketplace/skills',
-      label: t('marketplaceFilterSkills'),
-      icon: BrainCircuit,
     }
   ];
 
@@ -96,9 +101,10 @@ export function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1">
+      <nav className="flex-1 flex flex-col">
+        {/* Core Navigation */}
         <ul className="space-y-1">
-          {navItems.map((item) => {
+          {coreNavItems.map((item) => {
             const Icon = item.icon;
 
             return (
@@ -126,6 +132,42 @@ export function Sidebar() {
             );
           })}
         </ul>
+
+        {/* Advanced Navigation */}
+        <div className="mt-3 pt-3 border-t border-[#dde0ea]">
+          <div className="px-3 mb-2">
+            <span className="text-[11px] font-medium text-gray-400 uppercase tracking-wider">{t('advanced')}</span>
+          </div>
+          <ul className="space-y-1">
+            {advancedNavItems.map((item) => {
+              const Icon = item.icon;
+
+              return (
+                <li key={item.target}>
+                  <NavLink
+                    to={item.target}
+                    className={({ isActive }) => cn(
+                      'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base',
+                      isActive
+                        ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                        : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
+                    )}
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <Icon className={cn(
+                          'h-[17px] w-[17px] transition-colors',
+                          isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
+                        )} />
+                        <span className="flex-1 text-left">{item.label}</span>
+                      </>
+                    )}
+                  </NavLink>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
       </nav>
 
       {/* Help Button */}

package/src/lib/i18n.ts

@@ -131,6 +131,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   secrets: { zh: '密钥管理', en: 'Secrets' },
   runtime: { zh: '路由与运行时', en: 'Routing & Runtime' },
   marketplace: { zh: '市场', en: 'Marketplace' },
+  advanced: { zh: '高级', en: 'Advanced' },
 
   // Common
   enabled: { zh: '启用', en: 'Enabled' },