From 1d4898cbcee66b62f94a347d6dd66fae2d6ff390 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Wed, 6 Aug 2025 22:31:56 +0545
Subject: [PATCH] fix(Nextjs): Outline streaming issue solved

---
 .../outline/components/OutlineContent.tsx       | 17 ++++++++++++++---
 .../outline/components/OutlineItem.tsx          | 10 ++++++----
 .../outline/hooks/useOutlineManagement.ts       |  8 ++++----
 .../outline/hooks/useOutlineStreaming.ts        | 13 +++++++++----
 .../outline/hooks/usePresentationGeneration.ts  |  2 +-
 .../upload/components/UploadPage.tsx            |  2 ++
 .../store/slices/presentationGeneration.ts      |  4 ++--
 7 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
index 21852f5e..31bce158 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
@@ -18,7 +18,7 @@ import { Button } from "@/components/ui/button";
 import { FileText } from "lucide-react";
 
 interface OutlineContentProps {
-    outlines: string[] | null;
+    outlines: { content: string }[] | null;
     isLoading: boolean;
     isStreaming: boolean;
     onDragEnd: (event: any) => void;
@@ -83,7 +83,18 @@ const OutlineContent: React.FC<OutlineContentProps> = ({
                         collisionDetection={closestCenter}
                         onDragEnd={onDragEnd}
                     >
-                        <SortableContext
+                        {isStreaming ? (
+
+                           outlines.map((item, index) => (
+                            <OutlineItem
+                                key={`slide-${index}`}
+                                index={index + 1}
+                                slideOutline={item}
+                                isStreaming={isStreaming}
+                            />
+                        ))
+                        ) :
+                            <SortableContext
                             items={outlines?.map((item, index) => ({ id: `slide-${index}` })) || []}
                             strategy={verticalListSortingStrategy}
                         >
@@ -95,7 +106,7 @@ const OutlineContent: React.FC<OutlineContentProps> = ({
                                     isStreaming={isStreaming}
                                 />
                             ))}
-                        </SortableContext>
+                        </SortableContext>}
                     </DndContext>
 
                     <Button
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx
index 8ece1084..95045cc8 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx
@@ -10,7 +10,9 @@ import { useEffect } from "react"
 
 
 interface OutlineItemProps {
-    slideOutline: string,
+    slideOutline: {
+        content: string,
+    },
     index: number
     isStreaming: boolean
 }
@@ -38,7 +40,7 @@ export function OutlineItem({
         }
     }, [outlines.length]);
 
-    const handleSlideChange = (newOutline: string) => {
+    const handleSlideChange = (newOutline:any) => {
         if (isStreaming) return;
         const newData = outlines?.map((each, idx) => {
             if (idx === index - 1) {
@@ -100,10 +102,10 @@ export function OutlineItem({
                     {isStreaming ? <p
                         className="text-sm  flex-1 font-normal"
                     >
-                        {slideOutline || ''}
+                        {slideOutline.content || ''}
                     </p> : <MarkdownEditor
                         key={index}
-                        content={slideOutline || ''}
+                        content={slideOutline.content || ''}
                         onChange={(content) => handleSlideChange(content)}
                     />}
 
diff --git a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineManagement.ts b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineManagement.ts
index 6d27b1e5..774b459e 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineManagement.ts
+++ b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineManagement.ts
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 import { arrayMove } from "@dnd-kit/sortable";
 import { setOutlines } from "@/store/slices/presentationGeneration";
 
-export const useOutlineManagement = (outlines: string[] | null) => {
+export const useOutlineManagement = (outlines: { content: string }[] | null) => {
   const dispatch = useDispatch();
 
   const handleDragEnd = useCallback((event: any) => {
@@ -12,8 +12,8 @@ export const useOutlineManagement = (outlines: string[] | null) => {
     if (!active || !over || !outlines) return;
 
     if (active.id !== over.id) {
-      const oldIndex = outlines.findIndex((item) => item === active.id);
-      const newIndex = outlines.findIndex((item) => item === over.id);
+      const oldIndex = outlines.findIndex((item) => item.content === active.id);
+      const newIndex = outlines.findIndex((item) => item.content === over.id);
       const reorderedArray = arrayMove(outlines, oldIndex, newIndex);
       dispatch(setOutlines(reorderedArray));
     }
@@ -22,7 +22,7 @@ export const useOutlineManagement = (outlines: string[] | null) => {
   const handleAddSlide = useCallback(() => {
     if (!outlines) return;
 
-    const updatedOutlines = [...outlines, "Outline title"];
+    const updatedOutlines = [...outlines, { content: "Outline title" }];
     dispatch(setOutlines(updatedOutlines));
   }, [outlines, dispatch]);
 
diff --git a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
index c09a0981..c7d2c35f 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
+++ b/servers/nextjs/app/(presentation-generator)/outline/hooks/useOutlineStreaming.ts
@@ -31,10 +31,13 @@ export const useOutlineStreaming = (presentationId: string | null) => {
           const data = JSON.parse(event.data);
           switch (data.type) {
             case "chunk":
+              // console.log('data', data)
               accumulatedChunks += data.chunk;
+              // console.log('accumulatedChunks', accumulatedChunks)
               try {
                 const repairedJson = jsonrepair(accumulatedChunks);
                 const partialData = JSON.parse(repairedJson);
+                console.log('partialData', partialData)
                 if (partialData.slides) {
                   dispatch(setOutlines(partialData.slides));
                   setIsLoading(false)
@@ -45,8 +48,9 @@ export const useOutlineStreaming = (presentationId: string | null) => {
               break;
 
             case "complete":
+              console.log('complete', data)
               try {
-                const outlinesData: string[] = data.presentation.outlines.slides;
+                const outlinesData: { content: string }[] = data.presentation.outlines.slides;
                 dispatch(setOutlines(outlinesData));
                   setIsStreaming(false)
                   setIsLoading(false)
@@ -60,11 +64,13 @@ export const useOutlineStreaming = (presentationId: string | null) => {
               break;
 
             case "closing":
+              console.log('closing', data)
               setIsStreaming(false)
               setIsLoading(false)
               eventSource.close();
               break;
             case "error":
+              console.log('error', data)
               setIsStreaming(false)
               setIsLoading(false)
               eventSource.close();
@@ -78,18 +84,17 @@ export const useOutlineStreaming = (presentationId: string | null) => {
         });
 
         eventSource.onerror = () => {
+          console.log('onerror')
           setIsStreaming(false)
           setIsLoading(false)
           eventSource.close();
           toast.error("Failed to connect to the server. Please try again.");
         };
       } catch (error) {
+        console.log('error', error)
         setIsStreaming(false)
         setIsLoading(false)
         toast.error("Failed to initialize connection");
-      } finally {
-        setIsStreaming(false)
-        setIsLoading(false)
       }
     };
     initializeStream();
diff --git a/servers/nextjs/app/(presentation-generator)/outline/hooks/usePresentationGeneration.ts b/servers/nextjs/app/(presentation-generator)/outline/hooks/usePresentationGeneration.ts
index d3e0604f..3b80204b 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/hooks/usePresentationGeneration.ts
+++ b/servers/nextjs/app/(presentation-generator)/outline/hooks/usePresentationGeneration.ts
@@ -15,7 +15,7 @@ const DEFAULT_LOADING_STATE: LoadingState = {
 
 export const usePresentationGeneration = (
   presentationId: string | null,
-  outlines: string[] | null,
+  outlines: { content: string }[] | null,
   selectedLayoutGroup: LayoutGroup | null,
   setActiveTab: (tab: string) => void
 ) => {
diff --git a/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx b/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
index 771160d9..8b14b69e 100644
--- a/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
@@ -131,6 +131,7 @@ const UploadPage = () => {
       config,
       files: responses,
     }));
+    dispatch(clearOutlines())
     router.push("/documents-preview");
   };
 
@@ -154,6 +155,7 @@ const UploadPage = () => {
     });
 
     dispatch(setPresentationId(createResponse.id));
+    dispatch(clearOutlines())
     router.push("/outline");
   };
 
diff --git a/servers/nextjs/store/slices/presentationGeneration.ts b/servers/nextjs/store/slices/presentationGeneration.ts
index 623496a7..67c03cbc 100644
--- a/servers/nextjs/store/slices/presentationGeneration.ts
+++ b/servers/nextjs/store/slices/presentationGeneration.ts
@@ -18,7 +18,7 @@ interface PresentationGenerationState {
   presentation_id: string | null;
   isLoading: boolean;
   isStreaming: boolean | null;
-  outlines: string[];
+  outlines: { content: string }[];
   error: string | null;
   presentationData: PresentationData | null;
   isSlidesRendered: boolean;
@@ -72,7 +72,7 @@ const presentationGenerationSlice = createSlice({
       state.outlines = [];
     },
     // Set outlines
-    setOutlines: (state, action: PayloadAction<string[]>) => {
+    setOutlines: (state, action: PayloadAction<{ content: string }[]>) => {
       state.outlines = action.payload;
     },
     // Set presentation data