fix(chat): show parallel card lifecycle states

FranciscoMoretti · FranciscoMoretti · commit 67a87b78b938 · 2026-07-16T19:17:02.000+01:00
diff --git a/.github/pr-assets/threads/chat-parallel-responses.png b/.github/pr-assets/threads/chat-parallel-responses.png
diff --git a/apps/chat/components/assistant-message.tsx b/apps/chat/components/assistant-message.tsx
@@ -26,9 +26,14 @@ const PureAssistantMessage = ({
   const isPendingLastMessage =
     messageId === lastMessageId &&
     (status === "submitted" || status === "streaming");
-  const shouldHideCompletionActions = isLoading || isPendingLastMessage;
+  const activeStreamId = metadata.activeStreamId;
+  const hasActiveResponse = activeStreamId !== null;
+  const shouldHideCompletionActions =
+    isLoading || hasActiveResponse || isPendingLastMessage;
   const isReconnectingToMessageStream =
-    metadata.activeStreamId !== null && status === "submitted";
+    hasActiveResponse &&
+    !activeStreamId.startsWith("pending:") &&
+    status === "submitted";
 
   if (!chatId || isReconnectingToMessageStream) {
     return null;
diff --git a/apps/chat/components/multimodal-input.tsx b/apps/chat/components/multimodal-input.tsx
@@ -46,7 +46,10 @@ import {
 } from "@/lib/parallel-chat-requests";
 import { useStartProvisionalChat } from "@/lib/start-provisional-chat";
 import { useChatActions, useChatStoreApi } from "@/lib/stores/base";
-import { useLastMessageId } from "@/lib/stores/hooks-base";
+import {
+  useLastMessageId,
+  useLastMessageMetadata,
+} from "@/lib/stores/hooks-base";
 import { useAddMessageToTree } from "@/lib/stores/hooks-threads";
 import { ANONYMOUS_LIMITS } from "@/lib/types/anonymous";
 import { cn } from "@/lib/utils";
@@ -57,6 +60,7 @@ import { useTRPC } from "@/trpc/react";
 import { ConnectorsDropdown } from "./connectors-dropdown";
 import { LexicalChatInput } from "./lexical-chat-input";
 import { ModelSelector } from "./model-selector";
+import { getResponseAwareStatus } from "./parallel-response-status";
 import { ResponsiveTools } from "./responsive-tools";
 import {
   DropdownMenu,
@@ -117,12 +121,18 @@ function PureMultimodalInput({
   const currentRoute = useCurrentChatRoute();
   const startProvisionalChat = useStartProvisionalChat(chatId);
   const {
+    setStatus,
     setMessages,
     sendMessage,
     startRun,
     stop: stopHelper,
   } = useChatActions<ChatMessage>();
   const lastMessageId = useLastMessageId();
+  const lastMessageMetadata = useLastMessageMetadata();
+  const responseAwareStatus = getResponseAwareStatus(
+    status,
+    lastMessageMetadata ? { metadata: lastMessageMetadata } : null
+  );
   const {
     editorRef,
     selectedTool,
@@ -223,7 +233,7 @@ function PureMultimodalInput({
     if (isModelDisallowedForAnonymous) {
       return { enabled: false, message: "Log in to use this model" };
     }
-    if (status !== "ready" && status !== "error") {
+    if (responseAwareStatus !== "ready" && responseAwareStatus !== "error") {
       return {
         enabled: false,
         message: "Please wait for the model to finish its response!",
@@ -248,7 +258,7 @@ function PureMultimodalInput({
     isModelDisallowedForAnonymous,
     isParallelModelRequest,
     session?.user,
-    status,
+    responseAwareStatus,
     uploadQueue.length,
   ]);
 
@@ -385,6 +395,7 @@ function PureMultimodalInput({
     }
 
     if (primaryRequest) {
+      setStatus("submitted");
       sendMessage(message, {
         body: {
           ...createParallelRequestBody(primaryRequest, true),
@@ -423,6 +434,7 @@ function PureMultimodalInput({
           toast.error("Failed to complete all parallel responses");
         });
     } else {
+      setStatus("submitted");
       sendMessage(
         message,
         currentRoute.projectId
@@ -454,6 +466,7 @@ function PureMultimodalInput({
     parallelResponsesEnabled,
     selectedTool,
     sendMessage,
+    setStatus,
     startProvisionalChat,
     startRun,
     trimMessagesInEditMode,
@@ -531,7 +544,7 @@ function PureMultimodalInput({
 
   const handlePaste = useCallback(
     async (event: React.ClipboardEvent) => {
-      if (status !== "ready") {
+      if (responseAwareStatus !== "ready") {
         return;
       }
 
@@ -589,7 +602,7 @@ function PureMultimodalInput({
     [
       setAttachments,
       processFiles,
-      status,
+      responseAwareStatus,
       session,
       uploadFile,
       attachmentsEnabled,
@@ -644,7 +657,7 @@ function PureMultimodalInput({
       }
     },
     noClick: true, // Prevent click to open file dialog since we have the button
-    disabled: status !== "ready" || !attachmentsEnabled,
+    disabled: responseAwareStatus !== "ready" || !attachmentsEnabled,
     noDrag: !attachmentsEnabled,
     accept: acceptedTypes,
   });
@@ -758,7 +771,7 @@ function PureMultimodalInput({
             selectedModelSelection={selectedModelSelection}
             selectedTool={selectedTool}
             setSelectedTool={setSelectedTool}
-            status={status}
+            status={responseAwareStatus}
             submission={submission}
             submitForm={submitForm}
           />
diff --git a/apps/chat/components/parallel-response-cards.test.ts b/apps/chat/components/parallel-response-cards.test.ts
@@ -0,0 +1,58 @@
+import assert from "node:assert/strict";
+import { describe, it } from "vitest";
+import {
+  getParallelResponseLifecycle,
+  getResponseAwareStatus,
+  getStatusLabel,
+} from "./parallel-response-status";
+
+function createAssistantMessage(activeStreamId: string | null) {
+  return {
+    metadata: { activeStreamId },
+  };
+}
+
+describe("parallel response card status", () => {
+  it("keeps queued and streaming responses in a loading state", () => {
+    assert.equal(getParallelResponseLifecycle(null), "queued");
+    assert.equal(
+      getParallelResponseLifecycle(
+        createAssistantMessage("pending:assistant-1")
+      ),
+      "queued"
+    );
+    assert.equal(
+      getParallelResponseLifecycle(createAssistantMessage("stream-1")),
+      "generating"
+    );
+    assert.equal(getStatusLabel(true, "queued"), "Generating...");
+    assert.equal(getStatusLabel(false, "generating"), "Generating...");
+  });
+
+  it("shows completion only after the stream marker is cleared", () => {
+    assert.equal(
+      getParallelResponseLifecycle(createAssistantMessage(null)),
+      "complete"
+    );
+    assert.equal(getStatusLabel(true, "complete"), "Selected");
+    assert.equal(getStatusLabel(false, "complete"), "Task completed");
+  });
+
+  it("keeps selected pending responses stoppable", () => {
+    assert.equal(
+      getResponseAwareStatus(
+        "ready",
+        createAssistantMessage("pending:assistant-1")
+      ),
+      "submitted"
+    );
+    assert.equal(
+      getResponseAwareStatus("ready", createAssistantMessage("stream-1")),
+      "streaming"
+    );
+    assert.equal(
+      getResponseAwareStatus("ready", createAssistantMessage(null)),
+      "ready"
+    );
+  });
+});
diff --git a/apps/chat/components/parallel-response-cards.tsx b/apps/chat/components/parallel-response-cards.tsx
@@ -15,6 +15,10 @@ import { useParallelGroupInfo } from "@/lib/stores/hooks-threads";
 import { cn } from "@/lib/utils";
 import { useChatInput } from "@/providers/chat-input-provider";
 import { useChatModels } from "@/providers/chat-models-provider";
+import {
+  getParallelResponseLifecycle,
+  getStatusLabel,
+} from "./parallel-response-status";
 
 function getEffectiveModelId(
   message: {
@@ -38,16 +42,6 @@ function getModelOrderIndex(
   return index === -1 ? Number.POSITIVE_INFINITY : index;
 }
 
-function getStatusLabel(isSelected: boolean, isStreaming: boolean): string {
-  if (isSelected) {
-    return "Selected";
-  }
-  if (isStreaming) {
-    return "Generating...";
-  }
-  return "Task completed";
-}
-
 function PureParallelResponseCards({ messageId }: { messageId: string }) {
   const message = useMessageById<ChatMessage>(messageId);
   const parallelGroupInfo = useParallelGroupInfo(messageId);
@@ -131,10 +125,9 @@ function PureParallelResponseCards({ messageId }: { messageId: string }) {
           ? (getModelById(modelId)?.name ?? modelId)
           : "Model";
         const isSelected = selectedParallelIndex === slot.parallelIndex;
-        const isStreaming = slot.message
-          ? slot.message.metadata.activeStreamId !== null
-          : true;
-        const statusLabel = getStatusLabel(isSelected, isStreaming);
+        const lifecycle = getParallelResponseLifecycle(slot.message);
+        const isLoading = lifecycle !== "complete";
+        const statusLabel = getStatusLabel(isSelected, lifecycle);
 
         return (
           <Button
@@ -157,7 +150,7 @@ function PureParallelResponseCards({ messageId }: { messageId: string }) {
           >
             <span className="font-medium text-sm">{modelName}</span>
             <span className="flex items-center gap-1 text-muted-foreground text-xs">
-              {isStreaming ? (
+              {isLoading ? (
                 <LoaderCircle className="size-3 animate-spin" />
               ) : null}
               {statusLabel}
diff --git a/apps/chat/components/parallel-response-status.ts b/apps/chat/components/parallel-response-status.ts
@@ -0,0 +1,43 @@
+import type { ChatStatus } from "ai";
+
+export type ParallelResponseLifecycle = "queued" | "generating" | "complete";
+
+interface ParallelResponseStatusMessage {
+  metadata: {
+    activeStreamId: string | null;
+  };
+}
+
+export function getParallelResponseLifecycle(
+  message: ParallelResponseStatusMessage | null
+): ParallelResponseLifecycle {
+  if (!message || message.metadata.activeStreamId?.startsWith("pending:")) {
+    return "queued";
+  }
+  if (message.metadata.activeStreamId !== null) {
+    return "generating";
+  }
+  return "complete";
+}
+
+export function getStatusLabel(
+  isSelected: boolean,
+  lifecycle: ParallelResponseLifecycle
+): string {
+  if (lifecycle !== "complete") {
+    return "Generating...";
+  }
+  return isSelected ? "Selected" : "Task completed";
+}
+
+export function getResponseAwareStatus(
+  status: ChatStatus,
+  message: ParallelResponseStatusMessage | null
+): ChatStatus {
+  const activeStreamId = message?.metadata.activeStreamId;
+  if (!activeStreamId || status === "submitted" || status === "streaming") {
+    return status;
+  }
+
+  return activeStreamId.startsWith("pending:") ? "submitted" : "streaming";
+}
diff --git a/apps/chat/components/partial-message-loading.tsx b/apps/chat/components/partial-message-loading.tsx
@@ -7,7 +7,9 @@ import { Skeleton } from "./ui/skeleton";
 export function PartialMessageLoading({ messageId }: { messageId: string }) {
   const metadata = useMessageMetadataById(messageId);
   const status = useChatStatus();
-  const isLoading = metadata.activeStreamId && status === "submitted";
+  const isLoading =
+    metadata.activeStreamId?.startsWith("pending:") ||
+    (metadata.activeStreamId && status === "submitted");
 
   if (!isLoading) {
     return null;
diff --git a/apps/chat/lib/start-provisional-chat.ts b/apps/chat/lib/start-provisional-chat.ts
@@ -79,6 +79,8 @@ export function useStartProvisionalChat(chatId: string) {
         return false;
       }
 
+      storeState.setStatus("submitted");
+
       registerProvisionalChatConfirmation(chatId, {
         message,
         projectId: currentRoute.projectId,
diff --git a/apps/chat/lib/stores/hooks-base.ts b/apps/chat/lib/stores/hooks-base.ts
@@ -95,3 +95,6 @@ export const useMessageMetadataById = (
 
 export const useLastMessageId = () =>
   useBaseChatStore((state) => state.getLastMessageId());
+
+export const useLastMessageMetadata = () =>
+  useBaseChatStore((state) => state.getThrottledMessages().at(-1)?.metadata);

Original file line number	Diff line number	Diff line change
`@@ -79,6 +79,8 @@ export function useStartProvisionalChat(chatId: string) {`
`79`	`79`	`return false;`
`80`	`80`	`}`
`81`	`81`
	`82`	`+ storeState.setStatus("submitted");`
	`83`	`+`
`82`	`84`	`registerProvisionalChatConfirmation(chatId, {`
`83`	`85`	`message,`
`84`	`86`	`projectId: currentRoute.projectId,`