From a0e11522585cb7ebd4fb8e910a47fa50f9047c89 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 25 Jan 2024 17:26:36 -0800
Subject: [PATCH] WIP got response from backend in embedded app

---
 embedded-app/src/App.jsx         | 120 ++++++++++++++++++++++++++-----
 frontend/src/models/workspace.js |  66 +++++++++++++++++
 server/endpoints/chat.js         |   3 +-
 server/endpoints/embedded.js     |  16 ++++-
 4 files changed, 183 insertions(+), 22 deletions(-)

diff --git a/embedded-app/src/App.jsx b/embedded-app/src/App.jsx
index 23215d67..105fdd30 100644
--- a/embedded-app/src/App.jsx
+++ b/embedded-app/src/App.jsx
@@ -15,25 +15,105 @@ export default function App() {
       id = v4();
       localStorage.setItem("userId", id);
     }
-
     setUserId(id);
   }, []);
 
-  const toggleOpen = () => setIsOpen(!isOpen);
-
-  const streamMessages = () => {
-    const eventSource = fetchEventSource(
-      `http://localhost:3001/api/workspace/${userId}/embedded-chat`
-    );
-
-    eventSource.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data);
-      console.log(data);
-    });
+  const toggleOpen = () => {
+    setIsOpen(!isOpen);
+    // if (!isOpen) {
+    //   streamMessages();
+    // }
   };
 
-  const sendMessage = () => {
-    console.log(message);
+  const streamMessages = async () => {
+    const ctrl = new AbortController();
+    await fetchEventSource(
+      `http://localhost:3001/api/workspace/hello/stream-chat`,
+      {
+        method: "POST",
+        body: JSON.stringify({ message, mode: "query" }),
+        // headers: baseHeaders(),
+        signal: ctrl.signal,
+        openWhenHidden: true,
+        async onopen(response) {
+          if (response.ok) {
+            return; // everything's good
+          } else if (
+            response.status >= 400 &&
+            response.status < 500 &&
+            response.status !== 429
+          ) {
+            handleChat({
+              id: v4(),
+              type: "abort",
+              textResponse: null,
+              sources: [],
+              close: true,
+              error: `An error occurred while streaming response. Code ${response.status}`,
+            });
+            ctrl.abort();
+            throw new Error("Invalid Status code response.");
+          } else {
+            handleChat({
+              id: v4(),
+              type: "abort",
+              textResponse: null,
+              sources: [],
+              close: true,
+              error: `An error occurred while streaming response. Unknown Error.`,
+            });
+            ctrl.abort();
+            throw new Error("Unknown error");
+          }
+        },
+        async onmessage(msg) {
+          try {
+            const chatResult = JSON.parse(msg.data);
+            console.log(chatResult);
+            handleChat(chatResult);
+          } catch {}
+        },
+        onerror(err) {
+          handleChat({
+            id: v4(),
+            type: "abort",
+            textResponse: null,
+            sources: [],
+            close: true,
+            error: `An error occurred while streaming response. ${err.message}`,
+          });
+          ctrl.abort();
+          throw new Error();
+        },
+      }
+    );
+    // fetchEventSource(
+    //   `http://localhost:3001/api/workspace/${userId}/embedded-chat`,
+    //   {
+    //     onmessage(event) {
+    //       try {
+    //         // Assuming the data is in the format "data: <actual_JSON_data>"
+    //         // Extracting the JSON part from the data and parsing it.
+    //         const jsonPart = event.data.replace(/^data: /, "");
+    //         const parsedData = JSON.parse(jsonPart);
+    //         console.log("Parsed data:", parsedData);
+    //       } catch (error) {
+    //         console.error("Error parsing event data:", error);
+    //       }
+    //     },
+    //     onopen() {
+    //       console.log("Connection opened");
+    //     },
+    //     onerror(err) {
+    //       console.error("EventSource failed:", err);
+    //     },
+    //   }
+    // );
+  };
+
+  const sendMessage = async () => {
+    console.log("EMBEDDED MESSAGE: ", message);
+    await streamMessages();
     fetch(`http://localhost:3001/api/workspace/${userId}/embedded-chat`, {
       method: "POST",
       headers: {
@@ -43,7 +123,12 @@ export default function App() {
         message: message,
       }),
     })
-      .then((response) => response.json())
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
       .then((data) => {
         console.log("Success:", data);
       })
@@ -88,10 +173,7 @@ export default function App() {
           </>
         )}
         <button
-          onClick={() => {
-            toggleOpen();
-            streamMessages();
-          }}
+          onClick={toggleOpen}
           className={`absolute top-0 right-0 w-16 h-16 rounded-full ${
             isOpen ? "bg-white" : "bg-blue-500"
           }`}
diff --git a/frontend/src/models/workspace.js b/frontend/src/models/workspace.js
index d015918d..3704289f 100644
--- a/frontend/src/models/workspace.js
+++ b/frontend/src/models/workspace.js
@@ -118,6 +118,72 @@ const Workspace = {
       },
     });
   },
+
+  // /workspace/:userId/embedded-chat
+  streamChatEmbedded: async function (
+    { slug },
+    message,
+    mode = "query",
+    handleChat
+  ) {
+    const ctrl = new AbortController();
+    await fetchEventSource(`${API_BASE}/workspace/${slug}/embedded-chat`, {
+      method: "POST",
+      body: JSON.stringify({ message, mode }),
+      headers: baseHeaders(),
+      signal: ctrl.signal,
+      openWhenHidden: true,
+      async onopen(response) {
+        if (response.ok) {
+          return; // everything's good
+        } else if (
+          response.status >= 400 &&
+          response.status < 500 &&
+          response.status !== 429
+        ) {
+          handleChat({
+            id: v4(),
+            type: "abort",
+            textResponse: null,
+            sources: [],
+            close: true,
+            error: `An error occurred while streaming response. Code ${response.status}`,
+          });
+          ctrl.abort();
+          throw new Error("Invalid Status code response.");
+        } else {
+          handleChat({
+            id: v4(),
+            type: "abort",
+            textResponse: null,
+            sources: [],
+            close: true,
+            error: `An error occurred while streaming response. Unknown Error.`,
+          });
+          ctrl.abort();
+          throw new Error("Unknown error");
+        }
+      },
+      async onmessage(msg) {
+        try {
+          const chatResult = JSON.parse(msg.data);
+          handleChat(chatResult);
+        } catch {}
+      },
+      onerror(err) {
+        handleChat({
+          id: v4(),
+          type: "abort",
+          textResponse: null,
+          sources: [],
+          close: true,
+          error: `An error occurred while streaming response. ${err.message}`,
+        });
+        ctrl.abort();
+        throw new Error();
+      },
+    });
+  },
   all: async function () {
     const workspaces = await fetch(`${API_BASE}/workspaces`, {
       method: "GET",
diff --git a/server/endpoints/chat.js b/server/endpoints/chat.js
index 23739084..c8d56c5f 100644
--- a/server/endpoints/chat.js
+++ b/server/endpoints/chat.js
@@ -20,10 +20,11 @@ function chatEndpoints(app) {
 
   app.post(
     "/workspace/:slug/stream-chat",
-    [validatedRequest, flexUserRoleValid([ROLES.all])],
+    // [validatedRequest, flexUserRoleValid([ROLES.all])],
     async (request, response) => {
       try {
         const user = await userFromSession(request, response);
+        // console.log("user", user);
         const { slug } = request.params;
         const { message, mode = "query" } = reqBody(request);
 
diff --git a/server/endpoints/embedded.js b/server/endpoints/embedded.js
index 0804f23b..2bcff844 100644
--- a/server/endpoints/embedded.js
+++ b/server/endpoints/embedded.js
@@ -1,7 +1,6 @@
 const { v4: uuidv4 } = require("uuid");
 const { reqBody, userFromSession, multiUserMode } = require("../utils/http");
 const { Workspace } = require("../models/workspace");
-const { validatedRequest } = require("../utils/middleware/validatedRequest");
 const { WorkspaceChats } = require("../models/workspaceChats");
 const { SystemSettings } = require("../models/systemSettings");
 const { Telemetry } = require("../models/telemetry");
@@ -17,10 +16,23 @@ function embeddedEndpoints(app) {
   //http://localhost:3001/api/workspace/${userId}/embedded-chat
   app.post("/workspace/:userId/embedded-chat", async (request, response) => {
     try {
-      const user = await userFromSession(request, response);
+      //   const user = await userFromSession(request, response);
+      const user = {
+        id: 1,
+        username: "admin",
+        password:
+          "$2b$10$nRP1SfL1GnFGdcGmimxTpe2sa3nLVz1msy48O.V5q/zXDRFG4bkJC",
+        pfpFilename: null,
+        role: "admin",
+        suspended: 0,
+        createdAt: "2024-01-23T00:45:53.416Z",
+        lastUpdatedAt: "2024-01-23T00:45:53.416Z",
+      };
       const { userId } = request.params;
       const { message, mode = "query" } = reqBody(request);
 
+      console.log("message:", message);
+
       const slug = "hello";
 
       console.log("slug", slug);