fix(web): distinguish singular/plural in pending action submit label (#1826)

Author: jvzijp

apps/web/src/components/chat/ComposerPrimaryActions.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+
+import { formatPendingPrimaryActionLabel } from "./ComposerPrimaryActions";
+
+describe("formatPendingPrimaryActionLabel", () => {
+  it("returns 'Submitting...' while responding", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: false,
+        isLastQuestion: false,
+        isResponding: true,
+        questionIndex: 0,
+      }),
+    ).toBe("Submitting...");
+  });
+
+  it("returns 'Submitting...' while responding regardless of other flags", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: true,
+        isLastQuestion: true,
+        isResponding: true,
+        questionIndex: 3,
+      }),
+    ).toBe("Submitting...");
+  });
+
+  it("returns 'Submit' in compact mode on the last question", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: true,
+        isLastQuestion: true,
+        isResponding: false,
+        questionIndex: 0,
+      }),
+    ).toBe("Submit");
+  });
+
+  it("returns 'Next' in compact mode when not the last question", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: true,
+        isLastQuestion: false,
+        isResponding: false,
+        questionIndex: 1,
+      }),
+    ).toBe("Next");
+  });
+
+  it("returns 'Next question' when not the last question", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: false,
+        isLastQuestion: false,
+        isResponding: false,
+        questionIndex: 0,
+      }),
+    ).toBe("Next question");
+  });
+
+  it("returns singular 'Submit answer' on the last question when it is the only question", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: false,
+        isLastQuestion: true,
+        isResponding: false,
+        questionIndex: 0,
+      }),
+    ).toBe("Submit answer");
+  });
+
+  it("returns plural 'Submit answers' on the last question when there are multiple questions", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: false,
+        isLastQuestion: true,
+        isResponding: false,
+        questionIndex: 1,
+      }),
+    ).toBe("Submit answers");
+  });
+
+  it("returns plural 'Submit answers' for higher question indices", () => {
+    expect(
+      formatPendingPrimaryActionLabel({
+        compact: false,
+        isLastQuestion: true,
+        isResponding: false,
+        questionIndex: 5,
+      }),
+    ).toBe("Submit answers");
+  });
+});

apps/web/src/components/chat/ComposerPrimaryActions.tsx

@@ -27,18 +27,22 @@ interface ComposerPrimaryActionsProps {
   onImplementPlanInNewThread: () => void;
 }
 
-const formatPendingPrimaryActionLabel = (input: {
+export const formatPendingPrimaryActionLabel = (input: {
   compact: boolean;
   isLastQuestion: boolean;
   isResponding: boolean;
+  questionIndex: number;
 }) => {
   if (input.isResponding) {
     return "Submitting...";
   }
   if (input.compact) {
     return input.isLastQuestion ? "Submit" : "Next";
   }
-  return input.isLastQuestion ? "Submit answers" : "Next question";
+  if (!input.isLastQuestion) {
+    return "Next question";
+  }
+  return input.questionIndex > 0 ? "Submit answers" : "Submit answer";
 };
 
 export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
@@ -95,6 +99,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
             compact,
             isLastQuestion: pendingAction.isLastQuestion,
             isResponding: pendingAction.isResponding,
+            questionIndex: pendingAction.questionIndex,
           })}
         </Button>
       </div>