feat: event-driven ui updates

src/components/Chat.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 import Markdown from "react-markdown";
 import { Message, ProviderConfig } from "../types";
 
@@ -27,6 +28,16 @@ export function Chat() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const unlistenPromise = listen<Message[]>("chat:update", (event) => {
+      setMessages(event.payload);
+    });
+
+    return () => {
+      unlistenPromise.then((unlisten) => unlisten());
+    };
+  }, []);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -52,13 +63,11 @@ export function Chat() {
       };
 
       // Invoke backend chat command
-      // The backend returns the *new* messages (assistant response + tool outputs)
-      const response = await invoke<Message[]>("chat", {
+      // We rely on 'chat:update' events to update the state in real-time
+      await invoke("chat", {
         messages: newHistory,
         config: config,
       });
-
-      setMessages((prev) => [...prev, ...response]);
     } catch (e) {
       console.error(e);
       setMessages((prev) => [
@@ -229,7 +238,6 @@ export function Chat() {
             borderRadius: "4px",
             border: "1px solid #ccc",
           }}
-          disabled={loading}
         />
         <button
           onClick={sendMessage}