Working manual generation button.

src/components/WishlistSummary.tsx

@@ -2,7 +2,7 @@
 
 import { useStreamClient } from "@/hooks/useStreamClient";
 import { useEffect, useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from 'react-markdown';
 
 export default function WishlistSummary() {
   const [fullText, setFullText] = useState<string>("");
@@ -11,6 +11,7 @@ export default function WishlistSummary() {
   const { isStreaming, streamClient } = useStreamClient<string>();
   const hasStreamed = useRef(false);
   const typewriterInterval = useRef<NodeJS.Timeout | null>(null);
+  const [isRequested, setIsRequested] = useState(false);
 
   useEffect(() => {
     if (!isLoading) return;
@@ -60,10 +61,11 @@ export default function WishlistSummary() {
   }, [fullText, isLoading, displayedText]);
 
   useEffect(() => {
-    if (hasStreamed.current) return;
-    hasStreamed.current = true;
+    if (!isRequested || hasStreamed.current) return;
 
     const startStream = async () => {
+      hasStreamed.current = true; 
+
       try {
         await streamClient.stream("/api/wishlists/summary", {
           onChunk: (chunk) => {
@@ -76,12 +78,16 @@ export default function WishlistSummary() {
             console.error("Streaming error:", error);
             setFullText("Unable to load summary.");
             setIsLoading(false);
+            hasStreamed.current = false; 
+            setIsRequested(false);
           },
         });
       } catch (error) {
         console.error("Failed to start stream:", error);
         setFullText("Unable to load summary.");
         setIsLoading(false);
+        hasStreamed.current = false;
+        setIsRequested(false);
       }
     };
 
@@ -90,29 +96,39 @@ export default function WishlistSummary() {
     return () => {
       streamClient.cancel();
     };
-  }, [streamClient]);
+
+  }, [streamClient, isRequested]);
 
   const showContainer = displayedText.length > 0;
   const showCursor = isLoading || isStreaming || displayedText.length < fullText.length;
 
   return (
-    <div
-      className={`mt-8 mb-5 ${
-        showContainer 
-          ? "min-h-4 p-4 rounded border border-blue-primary bg-blue-light" 
-          : "h-0"
-      } transition-all duration-200 text-md text-black`}
-    >
-      {displayedText.split("\n").map((line, index, array) => (
-        <div key={index} className={line.trim() === "" ? "h-4" : "mb-2 last:mb-0 inline-block w-full"}>
-          <ReactMarkdown components={{ p: "span" }}>
-            {line}
+    <div className="w-full">
+      {!isRequested && (
+        <div className="flex justify-end -mb-12 mt-8 mr-28">
+          <button
+            onClick={() => setIsRequested(true)}
+            className="flex items-center px-4 py-2 bg-blue-primary text-white rounded-md font-medium hover:bg-blue-600 transition-colors shadow-sm"
+          >
+            Generate Summary
+          </button>
+        </div>
+      )}
+
+      <div
+        className={`mt-4 mb-5 ${
+          isRequested && showContainer 
+            ? "min-h-4 p-4 rounded border border-blue-primary bg-blue-light" 
+            : "hidden"
+        } transition-all duration-200`}
+      >
+        <div className="prose inline-block align-top-markdown-content">
+          <ReactMarkdown>
+            {displayedText}
           </ReactMarkdown>
-          {showCursor && index === array.length - 1 && (
-            <span className="animate-pulse">|</span>
-          )}
         </div>
-      ))}
+        {showCursor && <span className="animate-pulse">|</span>}
+      </div>
     </div>
   );
 }

src/screens/Wishlist/AdminWishlistScreen.tsx

@@ -42,7 +42,6 @@ export default function AdminWishlistScreen() {
     <div className="pb-32">
       <h1 className="text-2xl font-bold text-gray-primary">Wishlists</h1>
       <WishlistSummary />
-
       <AdvancedBaseTable
         columns={[
           {