refactor: replace isSending with isBusy in Chat components and update session store for improved state management

Author: milisp

src/components/ChatView.tsx

@@ -26,7 +26,7 @@ export function ChatView() {
   const currentEvents = activeConversationId
     ? events[activeConversationId] || []
     : [];
-  const { interrupt, isSending, beginPendingConversation, handleSendMessage } =
+  const { interrupt, isBusy, beginPendingConversation, handleSendMessage } =
     useSendMessage();
   const streamingMessages = useEventStreamStore((state) =>
     activeConversationId ? state.streaming[activeConversationId] : undefined,
@@ -97,7 +97,7 @@ export function ChatView() {
           onStopStreaming={() =>
             activeConversationId && interrupt(activeConversationId)
           }
-          disabled={isSending}
+          isBusy={isBusy}
         />
       </div>
     </div>

src/components/chat/ChatCompose.tsx

@@ -9,15 +9,15 @@ interface ChatComposeProps {
   onInputChange: (value: string) => void;
   onSendMessage: (text: string, attachments: MediaAttachment[]) => void;
   onStopStreaming: () => void;
-  disabled: boolean;
+  isBusy: boolean;
 }
 
 export function ChatCompose({
   inputValue,
   onInputChange,
   onSendMessage,
   onStopStreaming,
-  disabled,
+  isBusy,
 }: ChatComposeProps) {
   return (
     <div className="border-t bg-background px-2">
@@ -26,7 +26,8 @@ export function ChatCompose({
         onInputChange={onInputChange}
         onSendMessage={onSendMessage}
         onStopStreaming={onStopStreaming}
-        disabled={disabled}
+        disabled={isBusy}
+        isLoading={isBusy}
       />
       <div className="flex flex-wrap items-center">
         <Sandbox />

src/hooks/useCodex/useConversationEvents.ts

@@ -2,6 +2,7 @@ import { invoke, listen } from "@/lib/tauri-proxy";
 import { useEffect, useRef } from "react";
 import { ConversationId } from "@/bindings/ConversationId";
 import { CodexEvent } from "@/types/chat";
+import { useSessionStore } from "@/stores/useSessionStore";
 
 interface EventHandlers {
   isConversationReady?: boolean;
@@ -35,6 +36,7 @@ export function useConversationEvents(
   { isConversationReady = false, ...handlers }: EventHandlers,
 ) {
   const handlersRef = useRef<EventHandlers>(handlers);
+  const setIsBusy = useSessionStore((state) => state.setIsBusy);
 
   useEffect(() => {
     handlersRef.current = handlers;
@@ -63,6 +65,11 @@ export function useConversationEvents(
           }
 
           currentHandlers.onAnyEvent?.(event);
+          const busyOff =
+            msg.type === "error" ||
+            msg.type === "task_complete" ||
+            msg.type === "turn_aborted";
+          setIsBusy(!busyOff);
 
           switch (msg.type) {
             case "task_started":
@@ -160,6 +167,7 @@ export function useConversationEvents(
           params: { subscriptionId },
         });
       }
+      setIsBusy(false);
     };
-  }, [conversationId, isConversationReady]);
+  }, [conversationId, isConversationReady, setIsBusy]);
 }

src/hooks/useCodex/useSendMessage.ts

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { invoke } from "@/lib/tauri-proxy";
 import { InputItem } from "@/bindings/InputItem";
 import { useBuildNewConversationParams } from "@/hooks/useBuildNewConversationParams";
@@ -9,9 +8,11 @@ import { useCodexStore } from "@/stores/useCodexStore";
 import { useEventStore } from "@/stores/useEventStore";
 import { useConversation } from "./useConversation";
 import { useActiveConversationStore } from "@/stores/useActiveConversationStore";
+import { useSessionStore } from "@/stores/useSessionStore";
 
 export function useSendMessage() {
-  const [isSending, setIsSending] = useState(false);
+  const isBusy = useSessionStore((state) => state.isBusy);
+  const setIsBusy = useSessionStore((state) => state.setIsBusy);
   const buildNewConversationParams = useBuildNewConversationParams();
   const { cwd } = useCodexStore();
   const { clearEvents } = useEventStore();
@@ -21,7 +22,7 @@ export function useSendMessage() {
   );
 
   const sendMessage = async (conversationId: string, items: InputItem[]) => {
-    setIsSending(true);
+    setIsBusy(true);
     try {
       await invoke("send_user_message", {
         params: {
@@ -30,8 +31,9 @@ export function useSendMessage() {
         },
       });
       markConversationReady();
-    } finally {
-      setIsSending(false);
+    } catch (error) {
+      setIsBusy(false);
+      throw error;
     }
   };
 
@@ -69,7 +71,9 @@ export function useSendMessage() {
       attachments,
     );
     console.log("sendMessage params:", params);
-    sendMessage(currentConversationId, params.items);
+    void sendMessage(currentConversationId, params.items).catch((error) => {
+      console.error("Failed to send message:", error);
+    });
   };
 
   const handleCreateConversation = async (
@@ -100,7 +104,7 @@ export function useSendMessage() {
   return {
     sendMessage,
     interrupt,
-    isSending,
+    isBusy,
     handleCreateConversation,
     handleSendMessage,
     beginPendingConversation,

src/stores/useSessionStore.ts

@@ -2,21 +2,21 @@ import { create } from "zustand";
 
 interface SessionState {
   isInitializing: boolean;
-  isSending: boolean;
+  isBusy: boolean;
 }
 
 interface SessionActions {
   setIsInitializing: (value: boolean) => void;
-  setIsSending: (value: boolean) => void;
+  setIsBusy: (value: boolean) => void;
   reset: () => void;
 }
 
 export const useSessionStore = create<SessionState & SessionActions>()(
   (set) => ({
     isInitializing: false,
-    isSending: false,
+    isBusy: false,
     setIsInitializing: (value) => set({ isInitializing: value }),
-    setIsSending: (value) => set({ isSending: value }),
-    reset: () => set({ isInitializing: false, isSending: false }),
+    setIsBusy: (value) => set({ isBusy: value }),
+    reset: () => set({ isInitializing: false, isBusy: false }),
   }),
 );