@nextclaw/ui 0.5.23 → 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';
@@ -12,21 +13,6 @@ 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 STREAM_FRAME_MS = 18;
-
-function streamChunkSize(remaining: number): number {
-  if (remaining > 2400) return 120;
-  if (remaining > 1200) return 72;
-  if (remaining > 600) return 40;
-  if (remaining > 220) return 20;
-  return 8;
-}
-
-function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => {
-    window.setTimeout(resolve, ms);
-  });
-}
 
 function readStoredSessionKey(): string | null {
   if (typeof window === 'undefined') {
@@ -84,6 +70,7 @@ export function ChatPage() {
   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);
@@ -93,7 +80,6 @@ export function ChatPage() {
   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 ?? [];
@@ -113,7 +99,7 @@ export function ChatPage() {
   );
 
   const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
-  const isGenerating = sendChatTurn.isPending || Boolean(streamingAssistantMessage);
+  const isGenerating = isSending;
   const mergedMessages = useMemo(() => {
     if (!optimisticUserMessage && !streamingAssistantMessage) {
       return historyMessages;
@@ -154,7 +140,7 @@ export function ChatPage() {
       return;
     }
     element.scrollTop = element.scrollHeight;
-  }, [mergedMessages, sendChatTurn.isPending, selectedSessionKey]);
+  }, [mergedMessages, isSending, selectedSessionKey]);
 
   useEffect(() => {
     return () => {
@@ -164,6 +150,7 @@ export function ChatPage() {
 
   const createNewSession = () => {
     streamRunIdRef.current += 1;
+    setIsSending(false);
     setStreamingAssistantMessage(null);
     const next = buildNewSessionKey(selectedAgentId);
     setSelectedSessionKey(next);
@@ -187,6 +174,7 @@ export function ChatPage() {
       {
         onSuccess: async () => {
           streamRunIdRef.current += 1;
+          setIsSending(false);
           setStreamingAssistantMessage(null);
           setSelectedSessionKey(null);
           setOptimisticUserMessage(null);
@@ -215,46 +203,56 @@ 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);
       }
-      const replyText = typeof result.reply === 'string' ? result.reply : '';
-      let previewRunId: number | null = null;
-      if (replyText.trim()) {
-        previewRunId = ++streamRunIdRef.current;
-        const timestamp = new Date().toISOString();
-        let cursor = 0;
-        while (cursor < replyText.length && previewRunId === streamRunIdRef.current) {
-          cursor = Math.min(replyText.length, cursor + streamChunkSize(replyText.length - cursor));
-          setStreamingAssistantMessage({
-            role: 'assistant',
-            content: replyText.slice(0, cursor),
-            timestamp
-          });
-          await delay(STREAM_FRAME_MS);
-        }
-      }
       await sessionsQuery.refetch();
       if (hadActiveSession) {
         await historyQuery.refetch();
       }
-      if (previewRunId && previewRunId === streamRunIdRef.current) {
-        setStreamingAssistantMessage(null);
-      }
+      setStreamingAssistantMessage(null);
+      setIsSending(false);
     } catch {
       streamRunIdRef.current += 1;
+      setIsSending(false);
       setStreamingAssistantMessage(null);
       setOptimisticUserMessage(null);
       setDraft(message);
@@ -393,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 && !streamingAssistantMessage} />
+                  <ChatThread messages={mergedMessages} isSending={isSending && !streamingAssistantMessage} />
                 )}
               </>
             )}

package/dist/assets/useConfig-R5uGhZtD.js

@@ -1 +0,0 @@
-import{r as d,j as g,aq as c,ar as a,as as i,ae as o}from"./vendor-H2M3a_4Z.js";import{c as l,i as s,t}from"./index-D_vv0E-O.js";const y=d.forwardRef(({className:e,type:n,...r},u)=>g.jsx("input",{type:n,className:l("flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",e),ref:u,...r}));y.displayName="Input";async function p(){const e=await s.get("/api/config");if(!e.ok)throw new Error(e.error.message);return e.data}async function m(){const e=await s.get("/api/config/meta");if(!e.ok)throw new Error(e.error.message);return e.data}async function w(){const e=await s.get("/api/config/schema");if(!e.ok)throw new Error(e.error.message);return e.data}async function h(e){const n=await s.put("/api/config/model",e);if(!n.ok)throw new Error(n.error.message);return n.data}async function S(e,n){const r=await s.put(`/api/config/providers/${e}`,n);if(!r.ok)throw new Error(r.error.message);return r.data}async function q(e,n){const r=await s.put(`/api/config/channels/${e}`,n);if(!r.ok)throw new Error(r.error.message);return r.data}async function v(e){const n=await s.put("/api/config/runtime",e);if(!n.ok)throw new Error(n.error.message);return n.data}async function C(e){const n=await s.put("/api/config/secrets",e);if(!n.ok)throw new Error(n.error.message);return n.data}async function E(e,n){const r=await s.post(`/api/config/actions/${e}/execute`,n);if(!r.ok)throw new Error(r.error.message);return r.data}async function F(e){var f;const n=new URLSearchParams;(f=e==null?void 0:e.q)!=null&&f.trim()&&n.set("q",e.q.trim()),typeof(e==null?void 0:e.limit)=="number"&&Number.isFinite(e.limit)&&n.set("limit",String(Math.max(0,Math.trunc(e.limit)))),typeof(e==null?void 0:e.activeMinutes)=="number"&&Number.isFinite(e.activeMinutes)&&n.set("activeMinutes",String(Math.max(0,Math.trunc(e.activeMinutes))));const r=n.toString(),u=await s.get(r?"/api/sessions?"+r:"/api/sessions");if(!u.ok)throw new Error(u.error.message);return u.data}async function b(e,n=200){const r=await s.get(`/api/sessions/${encodeURIComponent(e)}/history?limit=${Math.max(1,Math.trunc(n))}`);if(!r.ok)throw new Error(r.error.message);return r.data}async function x(e,n){const r=await s.put(`/api/sessions/${encodeURIComponent(e)}`,n);if(!r.ok)throw new Error(r.error.message);return r.data}async function k(e){const n=await s.delete(`/api/sessions/${encodeURIComponent(e)}`);if(!n.ok)throw new Error(n.error.message);return n.data}async function K(e){const n=await s.post("/api/chat/turn",e);if(!n.ok)throw new Error(n.error.message);return n.data}async function M(e){const n=new URLSearchParams;e!=null&&e.all&&n.set("all","1");const r=n.toString(),u=await s.get(r?"/api/cron?"+r:"/api/cron");if(!u.ok)throw new Error(u.error.message);return u.data}async function Q(e){const n=await s.delete(`/api/cron/${encodeURIComponent(e)}`);if(!n.ok)throw new Error(n.error.message);return n.data}async function U(e,n){const r=await s.put(`/api/cron/${encodeURIComponent(e)}/enable`,n);if(!r.ok)throw new Error(r.error.message);return r.data}async function R(e,n){const r=await s.post(`/api/cron/${encodeURIComponent(e)}/run`,n);if(!r.ok)throw new Error(r.error.message);return r.data}function $(){return c({queryKey:["config"],queryFn:p,staleTime:3e4,refetchOnWindowFocus:!0})}function T(){return c({queryKey:["config-meta"],queryFn:m,staleTime:1/0})}function J(){return c({queryKey:["config-schema"],queryFn:w,staleTime:1/0})}function j(){const e=a();return i({mutationFn:h,onSuccess:()=>{e.invalidateQueries({queryKey:["config"]}),o.success(t("configSaved"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function N(){const e=a();return i({mutationFn:({provider:n,data:r})=>S(n,r),onSuccess:()=>{e.invalidateQueries({queryKey:["config"]}),o.success(t("configSaved"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function P(){const e=a();return i({mutationFn:({channel:n,data:r})=>q(n,r),onSuccess:()=>{e.invalidateQueries({queryKey:["config"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function D(){const e=a();return i({mutationFn:({data:n})=>v(n),onSuccess:()=>{e.invalidateQueries({queryKey:["config"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function H(){const e=a();return i({mutationFn:({data:n})=>C(n),onSuccess:()=>{e.invalidateQueries({queryKey:["config"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function L(){return i({mutationFn:({actionId:e,data:n})=>E(e,n),onError:e=>{o.error(t("error")+": "+e.message)}})}function B(e){return c({queryKey:["sessions",e],queryFn:()=>F(e),staleTime:1e4})}function O(e,n=200){return c({queryKey:["session-history",e,n],queryFn:()=>b(e,n),enabled:!!e,staleTime:5e3})}function W(){const e=a();return i({mutationFn:({key:n,data:r})=>x(n,r),onSuccess:(n,r)=>{e.invalidateQueries({queryKey:["sessions"]}),e.invalidateQueries({queryKey:["session-history",r.key]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function _(){const e=a();return i({mutationFn:({key:n})=>k(n),onSuccess:()=>{e.invalidateQueries({queryKey:["sessions"]}),e.invalidateQueries({queryKey:["session-history"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function z(){return i({mutationFn:({data:e})=>K(e),onError:e=>{o.error(t("chatSendFailed")+": "+e.message)}})}function G(e={all:!0}){return c({queryKey:["cron",e],queryFn:()=>M(e),staleTime:1e4})}function V(){const e=a();return i({mutationFn:({id:n})=>Q(n),onSuccess:()=>{e.invalidateQueries({queryKey:["cron"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function X(){const e=a();return i({mutationFn:({id:n,enabled:r})=>U(n,{enabled:r}),onSuccess:()=>{e.invalidateQueries({queryKey:["cron"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}function Y(){const e=a();return i({mutationFn:({id:n,force:r})=>R(n,{force:r}),onSuccess:()=>{e.invalidateQueries({queryKey:["cron"]}),o.success(t("configSavedApplied"))},onError:n=>{o.error(t("configSaveFailed")+": "+n.message)}})}export{y as I,J as a,j as b,B as c,O as d,_ as e,z as f,T as g,N as h,P as i,L as j,D as k,W as l,G as m,V as n,X as o,Y as p,H as q,$ as u};