Add a loader on sidebar when a model response is streaming

packages/react-headless/src/hooks/useThread.ts

@@ -1,6 +1,7 @@
 import { useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 import { useChatStore } from "../store/ChatContext";
+import { deriveThreadState, EMPTY_THREAD_STATE, resolveViewKey } from "../store/threadStateEntry";
 import type {
   ChatStore,
   ThreadActions,
@@ -12,26 +13,26 @@ import type {
 type ThreadSlice = ThreadState & ThreadActions;
 type ThreadListSlice = ThreadListState & ThreadListActions;
 
-const threadSelector = (s: ChatStore): ThreadSlice => ({
-  messages: s.messages,
-  isRunning: s.isRunning,
-  isLoadingMessages: s.isLoadingMessages,
-  threadError: s.threadError,
-  executingToolCallIds: s.executingToolCallIds,
-  processMessage: s.processMessage,
-  appendMessages: s.appendMessages,
-  updateMessage: s.updateMessage,
-  setMessages: s.setMessages,
-  deleteMessage: s.deleteMessage,
-  cancelMessage: s.cancelMessage,
-});
+const threadSelector = (s: ChatStore): ThreadSlice => {
+  const entry = s.threadStates[resolveViewKey(s.selectedThreadId)] ?? EMPTY_THREAD_STATE;
+  return {
+    ...deriveThreadState(entry),
+    processMessage: s.processMessage,
+    appendMessages: s.appendMessages,
+    updateMessage: s.updateMessage,
+    setMessages: s.setMessages,
+    deleteMessage: s.deleteMessage,
+    cancelMessage: s.cancelMessage,
+  };
+};
 
 const threadListSelector = (s: ChatStore): ThreadListSlice => ({
   threads: s.threads,
   isLoadingThreads: s.isLoadingThreads,
   threadListError: s.threadListError,
   selectedThreadId: s.selectedThreadId,
   hasMoreThreads: s.hasMoreThreads,
+  isCreatingThread: s.isCreatingThread,
   loadThreads: s.loadThreads,
   loadMoreThreads: s.loadMoreThreads,
   switchToNewThread: s.switchToNewThread,

packages/react-headless/src/hooks/useThreadState.ts

@@ -0,0 +1,32 @@
+import { useStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { useChatStore } from "../store/ChatContext";
+import { deriveThreadState, EMPTY_THREAD_STATE } from "../store/threadStateEntry";
+import type { ChatStore, ThreadState } from "../store/types";
+
+/**
+ * Read-only {@link ThreadState} for a thread **by id** — the by-id sibling of
+ * {@link useThread} (which is hardwired to the *selected* thread). Reflects a run
+ * even while it streams in the **background** (the thread isn't the one on screen),
+ * so a sidebar row can show a loader / error / loading state for any thread.
+ *
+ * Returns actions-free state only; actions (`processMessage`, `cancelMessage`, …)
+ * always target the selected thread, so use {@link useThread} for those.
+ *
+ * @example
+ * const isStreaming = useThreadState(threadId, (s) => s.isRunning);
+ * const { messages, threadError } = useThreadState(threadId);
+ *
+ * @category Hooks
+ */
+export function useThreadState(threadId: string | null): ThreadState;
+export function useThreadState<T>(threadId: string | null, selector: (state: ThreadState) => T): T;
+export function useThreadState<T>(threadId: string | null, selector?: (state: ThreadState) => T) {
+  const store = useChatStore();
+  const pick = (s: ChatStore): ThreadState =>
+    deriveThreadState((threadId != null && s.threadStates[threadId]) || EMPTY_THREAD_STATE);
+  if (selector) {
+    return useStore(store, (s) => selector(pick(s)));
+  }
+  return useStore(store, useShallow(pick));
+}

packages/react-headless/src/index.ts

@@ -6,6 +6,7 @@ export { useDetailedView } from "./hooks/useDetailedView";
 export { useDetailedViewPortalTarget } from "./hooks/useDetailedViewPortalTarget";
 export { MessageContext, MessageProvider, useMessage } from "./hooks/useMessage";
 export { useThread, useThreadList } from "./hooks/useThread";
+export { useThreadState } from "./hooks/useThreadState";
 export { useToolActivities } from "./hooks/useToolActivities";
 
 export { defineArtifactCategories } from "./store/artifactCategories";
@@ -78,6 +79,7 @@ export type {
   ThreadListActions,
   ThreadListState,
   ThreadState,
+  ThreadStateEntry,
 } from "./store/types";
 
 export type {