FEAT: add streaming action plan response to frontend (#140)

michelle-hadfield-nava · yoomlam · RyanHansz · web-flow · commit d20e219a7a55 · 2026-01-21T08:37:23.000-07:00
Co-authored-by: Yoom Lam &lt;yoom@navapbc.com&gt;
Co-authored-by: Ryan Hansz &lt;63253539+RyanHansz@users.noreply.github.com&gt;
Co-authored-by: Ryan Hansz &lt;ryan@Ryans-MacBook-Pro-2.local&gt;
Co-authored-by: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/frontend/src/app/[locale]/generate-referrals/page.tsx b/frontend/src/app/[locale]/generate-referrals/page.tsx
@@ -10,7 +10,12 @@ import "@/app/globals.css";
 import { fetchLocationFromZip } from "@/util/fetchLocation";
 
 import { PrintableReferralsReport } from "@/util/printReferrals";
-import { fetchActionPlan, ActionPlan } from "@/util/fetchActionPlan";
+import {
+  fetchActionPlan, // eslint-disable-line @typescript-eslint/no-unused-vars -- will be used for user preference between streaming/non-streaming
+  fetchActionPlanStreaming,
+  ActionPlan,
+  PartialActionPlan,
+} from "@/util/fetchActionPlan";
 import { ActionPlanSection } from "@/components/ActionPlanSection";
 
 import ResourcesList from "@/components/ResourcesList";
@@ -46,6 +51,10 @@ export default function Page() {
   const [selectedResources, setSelectedResources] = useState<Resource[]>([]);
   const [actionPlan, setActionPlan] = useState<ActionPlan | null>(null);
   const [isGeneratingActionPlan, setIsGeneratingActionPlan] = useState(false);
+  const [streamingPlan, setStreamingPlan] = useState<PartialActionPlan | null>(
+    null,
+  );
+  const [isStreaming, setIsStreaming] = useState(false);
   const [activeTab, setActiveTab] = useState("find-referrals");
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined,
@@ -176,29 +185,66 @@ export default function Page() {
     if (selectedResources.length === 0) return;
 
     setIsGeneratingActionPlan(true);
+    setIsStreaming(true);
     setActionPlan(null);
+    setStreamingPlan(null);
     setErrorMessage(undefined);
 
     try {
       const {
-        actionPlan: plan,
+        actionPlan: finalPlan,
         resultId,
         errorMessage: planError,
-      } = await fetchActionPlan(
+      } = await fetchActionPlanStreaming(
         selectedResources,
         userEmail,
         clientDescription,
+        // onChunk callback - receive structured partial plan
+        (partialPlan: PartialActionPlan) => {
+          setStreamingPlan(partialPlan);
+        },
+        // onComplete callback - stop streaming UI
+        () => {
+          setIsStreaming(false);
+        },
+        // onError callback - clear content and show error
+        (error: string) => {
+          setIsStreaming(false);
+          setIsGeneratingActionPlan(false);
+          setStreamingPlan(null);
+          setActionPlan(null);
+          setErrorMessage(error);
+        },
       );
-      setActionPlan(plan);
-      setActionPlanResultId(resultId);
+
+      // Handle errors from the streaming response
       if (planError) {
         setErrorMessage(planError);
-        setActionPlanResultId(""); // set the Action PLan Id to "" so we don't email an empty or errant result
+        setActionPlanResultId(""); // set the Action Plan Id to "" so we don't email an empty or errant result
+        setStreamingPlan(null);
+        setActionPlan(null);
+        return;
+      }
+
+      // Set the final parsed action plan
+      if (finalPlan) {
+        setActionPlan(finalPlan);
+        setActionPlanResultId(resultId);
+        setStreamingPlan(null); // Clear streaming state
+      } else {
+        setErrorMessage(
+          "There was an issue streaming the Action Plan. Please try again.",
+        );
+        setActionPlanResultId("");
       }
     } catch (error) {
       console.error("Error generating action plan:", error);
+      setIsStreaming(false);
+      setIsGeneratingActionPlan(false);
+      setStreamingPlan(null);
+      setActionPlan(null);
       setErrorMessage(
-        "The server encountered an unexpected error. Please try again later.",
+        "There was an issue streaming the Action Plan. Please try again.",
       );
     } finally {
       setIsGeneratingActionPlan(false);
@@ -419,6 +465,7 @@ export default function Page() {
                     onPrint={handlePrint}
                     resourcesResultId={resourcesResultId}
                     actionPlanResultId={actionPlanResultId}
+                    disabled={isStreaming}
                   />
                 </div>
               </div>
@@ -446,6 +493,8 @@ export default function Page() {
                   selectedResources={selectedResources}
                   actionPlan={actionPlan}
                   isGeneratingActionPlan={isGeneratingActionPlan}
+                  streamingPlan={streamingPlan}
+                  isStreaming={isStreaming}
                   onResourceSelection={handleResourceSelection}
                   onSelectAllResources={handleSelectAllResources}
                   onGenerateActionPlan={() => void generateActionPlan()}
@@ -463,6 +512,7 @@ export default function Page() {
                   actionPlanResultId={actionPlanResultId}
                   className="justify-end"
                   testIdSuffix="bottom"
+                  disabled={isStreaming}
                 />
               </div>
             )}
diff --git a/frontend/src/components/ActionPlanDisplay.tsx b/frontend/src/components/ActionPlanDisplay.tsx
@@ -1,8 +1,62 @@
-import { ActionPlan } from "@/util/fetchActionPlan";
+import { ActionPlan, PartialActionPlan } from "@/util/fetchActionPlan";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { FileText } from "lucide-react";
 import { parseMarkdownToHTML } from "@/util/markdown";
-export function ActionPlanDisplay({ actionPlan }: { actionPlan: ActionPlan }) {
+
+interface ActionPlanDisplayProps {
+  actionPlan: ActionPlan | null;
+  streamingPlan?: PartialActionPlan | null;
+  isStreaming?: boolean;
+}
+
+export function ActionPlanDisplay({
+  actionPlan,
+  streamingPlan,
+  isStreaming,
+}: ActionPlanDisplayProps) {
+  // If streaming, show partial content with progressive rendering
+  if (isStreaming && streamingPlan) {
+    const displayTitle = streamingPlan.title || "Generating Action Plan...";
+
+    return (
+      <Card className="bg-blue-50 border-blue-200 shadow-sm mb-5">
+        <CardHeader>
+          <CardTitle className="text-lg font-semibold text-blue-900 flex items-center gap-2">
+            <FileText className="w-5 h-5 text-blue-600" />
+            {displayTitle}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {/* Show summary if available */}
+          {streamingPlan.summary && (
+            <div className="mb-3 text-black text-base">
+              {streamingPlan.summary}
+            </div>
+          )}
+
+          {/* Show content with markdown rendering and blinking cursor */}
+          {streamingPlan.content && (
+            <div className="relative">
+              <div
+                className="prose prose-sm max-w-none text-gray-800"
+                dangerouslySetInnerHTML={{
+                  __html: parseMarkdownToHTML(streamingPlan.content),
+                }}
+              />
+              {/* Blinking cursor to indicate streaming */}
+              <span className="inline-block w-2 h-4 bg-blue-600 animate-pulse ml-1 align-middle">
+                |
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Otherwise show parsed action plan (final complete version)
+  if (!actionPlan) return null;
+
   return (
     <Card className="bg-blue-50 border-blue-200 shadow-sm mb-5">
       <CardHeader>
diff --git a/frontend/src/components/ActionPlanSection.tsx b/frontend/src/components/ActionPlanSection.tsx
@@ -3,14 +3,16 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Resource } from "@/types/resources";
-import { ActionPlan } from "@/util/fetchActionPlan";
+import { ActionPlan, PartialActionPlan } from "@/util/fetchActionPlan";
 import { ActionPlanDisplay } from "@/components/ActionPlanDisplay";
 
 interface ActionPlanSectionProps {
   resources: Resource[];
   selectedResources: Resource[];
   actionPlan: ActionPlan | null;
   isGeneratingActionPlan: boolean;
+  streamingPlan?: PartialActionPlan | null;
+  isStreaming?: boolean;
   onResourceSelection: (resource: Resource, checked: boolean) => void;
   onSelectAllResources: () => void;
   onGenerateActionPlan: () => void;
@@ -21,6 +23,8 @@ export function ActionPlanSection({
   selectedResources,
   actionPlan,
   isGeneratingActionPlan,
+  streamingPlan,
+  isStreaming,
   onResourceSelection,
   onSelectAllResources,
   onGenerateActionPlan,
@@ -97,7 +101,13 @@ export function ActionPlanSection({
       </Card>
 
       {/* Action Plan Display */}
-      {actionPlan && <ActionPlanDisplay actionPlan={actionPlan} />}
+      {(actionPlan || isStreaming) && (
+        <ActionPlanDisplay
+          actionPlan={actionPlan}
+          streamingPlan={streamingPlan}
+          isStreaming={isStreaming}
+        />
+      )}
     </>
   );
 }
diff --git a/frontend/src/components/EmailReferralsButton.tsx b/frontend/src/components/EmailReferralsButton.tsx
@@ -20,11 +20,13 @@ import { emailResult } from "@/util/emailResult";
 interface EmailReferralsProps {
   resultId: string;
   actionPlanResultId?: string;
+  disabled?: boolean;
 }
 
 export function EmailReferralsButton({
   resultId,
   actionPlanResultId,
+  disabled = false,
 }: EmailReferralsProps) {
   const [email, setEmail] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -72,6 +74,7 @@ export function EmailReferralsButton({
           variant="outline"
           className="hover:bg-gray-100 hover:text-gray-900"
           data-testid="emailReferralsButton"
+          disabled={disabled}
         >
           <Mail className="w-4 h-4" />
           Email
diff --git a/frontend/src/components/ShareButtons.tsx b/frontend/src/components/ShareButtons.tsx
@@ -9,6 +9,7 @@ interface ShareButtonsProps {
   actionPlanResultId: string;
   className?: string;
   testIdSuffix?: string;
+  disabled?: boolean;
 }
 
 export function ShareButtons({
@@ -17,6 +18,7 @@ export function ShareButtons({
   actionPlanResultId,
   className,
   testIdSuffix,
+  disabled = false,
 }: ShareButtonsProps) {
   return (
     <div className={cn("flex gap-2", className)}>
@@ -25,6 +27,7 @@ export function ShareButtons({
         variant="outline"
         className="hover:bg-gray-100 hover:text-gray-900"
         data-testid={`printReferralsButton${testIdSuffix ? `-${testIdSuffix}` : ""}`}
+        disabled={disabled}
       >
         <Printer className="w-4 h-4" aria-hidden="true" />
         Print
@@ -33,6 +36,7 @@ export function ShareButtons({
         <EmailReferralsButton
           resultId={resourcesResultId}
           actionPlanResultId={actionPlanResultId || undefined}
+          disabled={disabled}
         />
       )}
     </div>
diff --git a/frontend/src/util/fetchActionPlan.ts b/frontend/src/util/fetchActionPlan.ts
