fix(ui): SSE in React chat

webui/app.go

@@ -364,7 +364,7 @@ func (a *App) ChatAPI(pool *state.AgentPool) func(c *fiber.Ctx) error {
 			xlog.Error("Error marshaling status message", "error", err)
 		} else {
 			manager.Send(
-				sse.NewMessage(string(statusData)).WithEvent("status"))
+				sse.NewMessage(string(statusData)).WithEvent("json_status"))
 		}
 
 		// Process the message asynchronously
@@ -411,7 +411,7 @@ func (a *App) ChatAPI(pool *state.AgentPool) func(c *fiber.Ctx) error {
 				xlog.Error("Error marshaling completed status", "error", err)
 			} else {
 				manager.Send(
-					sse.NewMessage(string(completedData)).WithEvent("status"))
+					sse.NewMessage(string(completedData)).WithEvent("json_status"))
 			}
 		}()
 

webui/react-ui/src/hooks/useChat.js

@@ -12,6 +12,7 @@ export function useChat(agentName) {
   const [sending, setSending] = useState(false);
   const [error, setError] = useState(null);
   const processedMessageIds = useRef(new Set());
+  const localMessageContents = useRef(new Set()); // Track locally added message contents
   
   // Use SSE hook to receive real-time messages
   const { messages: sseMessages, statusUpdates, errorMessages, isConnected } = useSSE(agentName);
@@ -42,6 +43,11 @@ export function useChat(agentName) {
         // Add to processed set to avoid duplicates
         processedMessageIds.current.add(messageData.id);
         
+        // Skip user messages that we've already added locally
+        if (messageData.sender === 'user' && localMessageContents.current.has(messageData.content)) {
+          return;
+        }
+        
         // Add the message to our state
         setMessages(prev => [...prev, {
           id: messageData.id,
@@ -115,6 +121,9 @@ export function useChat(agentName) {
     
     setMessages(prev => [...prev, userMessage]);
     
+    // Track this message content to avoid duplication from SSE
+    localMessageContents.current.add(content);
+    
     try {
       // Use the JSON-based API endpoint
       await chatApi.sendMessage(agentName, content);
@@ -131,6 +140,7 @@ export function useChat(agentName) {
   const clearChat = useCallback(() => {
     setMessages([]);
     processedMessageIds.current.clear();
+    localMessageContents.current.clear(); // Clear tracked local messages
   }, []);
 
   return {

webui/react-ui/src/hooks/useSSE.js

@@ -23,7 +23,7 @@ export function useSSE(agentName) {
     }
     
     // Create a new EventSource connection
-    const sseUrl = `${API_CONFIG.baseUrl}${API_CONFIG.endpoints.sse(agentName)}`;
+    const sseUrl = new URL(`${API_CONFIG.endpoints.sse(agentName)}`, window.location.origin).href;
     const eventSource = new EventSource(sseUrl);
     eventSourceRef.current = eventSource;