WIP got response from backend in embedded app

This commit is contained in:
shatfield4 2024-01-25 17:26:36 -08:00
parent 58ecc10dcc
commit a0e1152258
4 changed files with 183 additions and 22 deletions

View File

@ -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"
}`}

View File

@ -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",

View File

@ -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);

View File

@ -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);