CHORE: moved common streaming code into a utility, defined API response types (#175)

Author: michelle-hadfield-nava

frontend/src/app/[locale]/generate-referrals/page.tsx

@@ -0,0 +1,158 @@
+import { useState, useCallback } from "react";
+import { Resource } from "@/types/resources";
+import {
+  ActionPlan,
+  PartialActionPlan,
+  fetchActionPlanStreaming,
+} from "@/util/fetchActionPlan";
+
+export interface UseActionPlanStreamingReturn {
+  isGeneratingActionPlan: boolean;
+  isStreamingActionPlan: boolean;
+  streamingPlan: PartialActionPlan | null;
+  actionPlan: ActionPlan | null;
+  errorMessage: string | undefined;
+  generateActionPlan: (
+    selectedResources: Resource[],
+    userEmail: string,
+    clientDescription: string,
+  ) => Promise<{
+    actionPlan: ActionPlan | null;
+    resultId: string;
+    errorMessage?: string;
+  }>;
+  setErrorMessage: (error: string | undefined) => void;
+  clearActionPlan: () => void;
+}
+
+/**
+ * Custom hook to handle action plan streaming with SSE
+ */
+export function useActionPlanStreaming(): UseActionPlanStreamingReturn {
+  const [isGeneratingActionPlan, setIsGeneratingActionPlan] = useState(false);
+  const [isStreamingActionPlan, setIsStreamingActionPlan] = useState(false);
+  const [streamingPlan, setStreamingPlan] = useState<PartialActionPlan | null>(
+    null,
+  );
+  const [actionPlan, setActionPlan] = useState<ActionPlan | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
+
+  const generateActionPlan = useCallback(
+    async (
+      selectedResources: Resource[],
+      userEmail: string,
+      clientDescription: string,
+    ) => {
+      if (selectedResources.length === 0) {
+        return {
+          actionPlan: null,
+          resultId: "",
+          errorMessage: "No resources selected",
+        };
+      }
+
+      setIsGeneratingActionPlan(true);
+      setIsStreamingActionPlan(true);
+      setActionPlan(null);
+      setStreamingPlan(null);
+      setErrorMessage(undefined);
+
+      try {
+        const {
+          actionPlan: finalPlan,
+          resultId,
+          errorMessage: planError,
+        } = await fetchActionPlanStreaming(
+          selectedResources,
+          userEmail,
+          clientDescription,
+          // onChunk callback - receive structured partial plan
+          (partialPlan: PartialActionPlan) => {
+            setStreamingPlan(partialPlan);
+          },
+          // onComplete callback - stop streaming UI
+          () => {
+            setIsStreamingActionPlan(false);
+          },
+          // onError callback - clear content and show error
+          (error: string) => {
+            setIsStreamingActionPlan(false);
+            setIsGeneratingActionPlan(false);
+            setStreamingPlan(null);
+            setActionPlan(null);
+            setErrorMessage(error);
+          },
+        );
+
+        // Handle errors from the streaming response
+        if (planError) {
+          setErrorMessage(planError);
+          setStreamingPlan(null);
+          setActionPlan(null);
+          return {
+            actionPlan: null,
+            resultId: "",
+            errorMessage: planError,
+          };
+        }
+
+        // Set the final parsed action plan
+        if (finalPlan) {
+          setActionPlan(finalPlan);
+          setStreamingPlan(null); // Clear streaming state
+          return {
+            actionPlan: finalPlan,
+            resultId,
+          };
+        } else {
+          const errorMsg =
+            "There was an issue streaming the Action Plan. Please try again.";
+          setErrorMessage(errorMsg);
+          return {
+            actionPlan: null,
+            resultId: "",
+            errorMessage: errorMsg,
+          };
+        }
+      } catch (error) {
+        console.error("Error generating action plan:", error);
+        setIsStreamingActionPlan(false);
+        setIsGeneratingActionPlan(false);
+        setStreamingPlan(null);
+        setActionPlan(null);
+        const errorMsg =
+          "There was an issue streaming the Action Plan. Please try again.";
+        setErrorMessage(errorMsg);
+        return {
+          actionPlan: null,
+          resultId: "",
+          errorMessage: errorMsg,
+        };
+      } finally {
+        setIsGeneratingActionPlan(false);
+      }
+    },
+    [],
+  );
+
+  const clearActionPlan = useCallback(() => {
+    setActionPlan(null);
+    setStreamingPlan(null);
+    setIsStreamingActionPlan(false);
+    setIsGeneratingActionPlan(false);
+    setErrorMessage(undefined);
+  }, []);
+
+  return {
+    isGeneratingActionPlan,
+    isStreamingActionPlan,
+    streamingPlan,
+    actionPlan,
+    errorMessage,
+    generateActionPlan,
+    setErrorMessage,
+    clearActionPlan,
+  };
+}

frontend/src/hooks/useActionPlanStreaming.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback } from "react";
+import { Resource } from "@/types/resources";
+
+export interface UseResourceRemovalReturn {
+  recentlyRemoved: Resource | null;
+  removedResourceIndex: number | null;
+  handleRemoveResource: (
+    resourceToRemove: Resource,
+    currentResources?: Resource[],
+  ) => void;
+  handleUndoRemove: (
+    onRestore: (resource: Resource, index: number | null) => void,
+  ) => void;
+}
+
+/**
+ * Custom hook to handle resource removal and undo functionality
+ */
+export function useResourceRemoval(): UseResourceRemovalReturn {
+  const [recentlyRemoved, setRecentlyRemoved] = useState<Resource | null>(null);
+  const [removedResourceIndex, setRemovedResourceIndex] = useState<
+    number | null
+  >(null);
+
+  const handleRemoveResource = useCallback(
+    (resourceToRemove: Resource, currentResources?: Resource[]) => {
+      // Find and store the index before removing
+      const index = currentResources?.findIndex(
+        (r) => r.name === resourceToRemove.name,
+      );
+      if (index !== undefined && index !== -1) {
+        setRemovedResourceIndex(index);
+      }
+
+      setRecentlyRemoved(resourceToRemove);
+
+      // Auto-clear the undo notification after 7.5 seconds
+      setTimeout(() => {
+        setRecentlyRemoved((current) => {
+          // If the resource is still marked as recently removed, clear it
+          if (current === resourceToRemove) {
+            return null;
+          }
+          return current;
+        });
+        setRemovedResourceIndex(null);
+      }, 7500);
+    },
+    [],
+  );
+
+  const handleUndoRemove = useCallback(
+    (onRestore: (resource: Resource, index: number | null) => void) => {
+      if (recentlyRemoved) {
+        onRestore(recentlyRemoved, removedResourceIndex);
+        setRecentlyRemoved(null);
+        setRemovedResourceIndex(null);
+      }
+    },
+    [recentlyRemoved, removedResourceIndex],
+  );
+
+  return {
+    recentlyRemoved,
+    removedResourceIndex,
+    handleRemoveResource,
+    handleUndoRemove,
+  };
+}