Another Failed Attempt at streaming

3 files changed, 49 insertions, 40 deletions

diff --git a/apps/cf-ai-backend/src/index.ts b/apps/cf-ai-backend/src/index.ts
index 26a9fa48..e89d170c 100644
--- a/apps/cf-ai-backend/src/index.ts
+++ b/apps/cf-ai-backend/src/index.ts
@@ -330,6 +330,7 @@ app.delete(
   },
 );
 
+// ERROR #1 - this is the api that the editor uses, it is just a scrape off of /api/chat so you may check that out 
 app.get('/api/editorai', zValidator(
   "query",
   z.object({
@@ -342,9 +343,7 @@ app.get('/api/editorai', zValidator(
 
   const response = await streamText({ model, prompt: `${request}-${context}`, maxTokens: 224 });
 
-  const r = response.toTextStreamResponse();
-
-  return r;  
+  return response.toTextStreamResponse();
 })
 
 export default app;
diff --git a/apps/web/app/(editor)/components/aigenerate.tsx b/apps/web/app/(editor)/components/aigenerate.tsx
index c5f6f2c1..c9ba657b 100644
--- a/apps/web/app/(editor)/components/aigenerate.tsx
+++ b/apps/web/app/(editor)/components/aigenerate.tsx
@@ -8,6 +8,8 @@ import Autocompletesvg from "./ui/autocompletesvg";
 import { motion, AnimatePresence } from "framer-motion";
 import type { Editor } from "@tiptap/core";
 import { useEditor } from "novel";
+import { NodeSelection } from 'prosemirror-state'
+
 
 function Aigenerate() {
   const [visible, setVisible] = useState(false);
@@ -143,6 +145,7 @@ async function AigenerateContent({
     "continue this, minimum 80 characters, do not repeat just continue don't use ... to denote start",
   ]
 
+  // ERROR #3 - This is where we call the ai generate api
   const resp = await fetch("/api/editorai", {
     method: "POST",
     body: JSON.stringify({
@@ -151,30 +154,41 @@ async function AigenerateContent({
     }),
   });
 
-  if (!resp.body) {
-    console.error("No response body");
-    return;
-  }
-  const reader = resp.body.getReader();
-  // const decoder = new TextDecoder();
+  // this is the exact replica of your chatwindow code, I have 
+  // 2 more versions of these code commented below, but they also dont work
+  const reader = resp.body?.getReader();
   let done = false;
-  let position = to;
-
-  while (!done) {
-    const { value, done: readerDone } = await reader.read();
-    done = readerDone;
-
-    if (value) {
-      const chunk = new TextDecoder().decode(value)
-      // decoder.decode(value, { stream: true });
-      console.log(chunk);
-      // editor.chain().focus().insertContentAt(position + 1, chunk).run();
-      position += chunk.length
-    }
+  while (!done && reader) {
+    const { value, done: d } = await reader.read();
+    done = d;
+
+    console.log(new TextDecoder().decode(value))
   }
-  console.log("Stream complete");
+
+  // 2nd Method
+  // if (!resp.body) {
+  //   console.error("No response body");
+  //   return;
+  // }
+  // const reader = resp.body.getReader();
+  // const decoder = new TextDecoder();
+  // let done = false;
+  // let position = to;
+  
+  // while (!done) {
+  //   const { value, done: readerDone } = await reader.read();
+  //   done = readerDone;
+  //   if (value) {
+  //     const chunk = decoder.decode(value, { stream: true });
+  //     console.log(chunk);
+  //     editor.chain().focus().insertContentAt(position + 1, chunk).run();
+  //     position += chunk.length;
+  //   }
+  // }
+  // console.log("Stream complete");
 
 
+  // 3rd method
   // const reader = resp.body?.getReader();
   // let done = false;
   // let position = from;
@@ -184,22 +198,9 @@ async function AigenerateContent({
 
   //   const cont = new TextDecoder().decode(value)
   //   console.log(cont);
-    // 
   // }
   // const {completion}: {completion: string} = await res.json();
   // console.log(completion)
 
-  // if (idx === 0 || idx === 1){
-  //   const selectionLength = completion.length + from
-  //   editor.chain().focus()
-  //   .insertContentAt({from, to}, completion).setTextSelection({from, to: selectionLength})
-  //   .run();
-  // } else {
-  //   const selectionLength = completion.length + to + 1
-  //   editor.chain().focus()
-  //   .insertContentAt(to+1, completion).setTextSelection({from, to: selectionLength})
-  //   .run();
-  // }
-
   setGeneratingfn(false);
 }
diff --git a/apps/web/app/api/editorai/route.ts b/apps/web/app/api/editorai/route.ts
index 43d8eb64..5e1fbf0c 100644
--- a/apps/web/app/api/editorai/route.ts
+++ b/apps/web/app/api/editorai/route.ts
@@ -3,6 +3,8 @@ import { ensureAuth } from "../ensureAuth";
 
 export const runtime = "edge";
 
+// ERROR #2 - This the the next function that calls the backend, I sometimes think this is redundency, but whatever
+// I have commented the auth code, It should not work in development, but it still does sometimes
 export async function POST(request: NextRequest) {
   // const d = await ensureAuth(request);
   // if (!d) {
@@ -11,10 +13,17 @@ export async function POST(request: NextRequest) {
   const res : {context: string, request: string} = await request.json()
 
   try {
-    const response = await fetch(`${process.env.BACKEND_BASE_URL}/api/editorai?context=${res.context}&request=${res.request}`);
-    return new Response(response.body, { status: 200 });
-    // const result = await response.json();
-    // return new Response(JSON.stringify(result));
+    const resp = await fetch(`${process.env.BACKEND_BASE_URL}/api/editorai?context=${res.context}&request=${res.request}`);
+    // this just checks if there are erros I am keeping it commented for you to better understand the important pieces
+    // if (resp.status !== 200 || !resp.ok) {
+    //   const errorData = await resp.text();
+    //   console.log(errorData);
+    //   return new Response(
+    //     JSON.stringify({ message: "Error in CF function", error: errorData }),
+    //     { status: resp.status },
+    //   );
+    // }
+    return new Response(resp.body, { status: 200 });
   } catch (error) {
     return new Response(`Error, ${error}`)
   }