sse events on text submit

.gitignore

@@ -21,6 +21,7 @@ coverage
 # Compiled Dirs (http://nodejs.org/api/addons.html)
 build/
 dist/
+public/main.js
 
 # Dependency directorys
 # Deployed apps should consider commenting these lines out:

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "chatgpt": "^4.1.1",
+        "cors": "^2.8.5",
         "crypto-browserify": "^3.12.0",
         "dotenv": "^16.0.3",
         "eventsource": "^2.0.2",
@@ -5381,6 +5382,18 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -8754,6 +8767,14 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -11612,7 +11633,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -16113,6 +16133,15 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -18626,6 +18655,11 @@
         "boolbase": "^1.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -20582,8 +20616,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
-      "dev": true
     },
     "watchpack": {
       "version": "2.4.0",

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server .",
-    "build": "Webpack .",
+    "build": "Webpack . --watch",
+    "server": "npx nodemon server/index.js",
     "test": "test"
   },
   "repository": {
@@ -21,6 +22,7 @@
   "homepage": "https://github.com/danny-avila/rpp2210-mvp#readme",
   "dependencies": {
     "chatgpt": "^4.1.1",
+    "cors": "^2.8.5",
     "crypto-browserify": "^3.12.0",
     "dotenv": "^16.0.3",
     "eventsource": "^2.0.2",

src/App.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TextChat from './components/TextChat';
 
 const App = () => {
+  const [messages, setMessages] = useState([]);
 
   return (
     <div className="flex h-screen">

src/components/TextChat.jsx

@@ -1,7 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
-import EventSource from 'eventsource';
+import { SSE } from '../../app/sse';
+
+const handleSubmit = (payload) => {
+  const events = new SSE('http://localhost:3050/ask', {
+    payload: JSON.stringify({ text: payload }),
+    headers: { 'Content-Type': 'application/json' }
+  });
+  console.log('we in handleSubmit');
+  events.onopen = function () {
+    console.log('connection is opened');
+  };
+
+  events.onmessage = function (e) {
+    console.log(e);
+  };
+
+  events.onerror = function (e) {
+    console.log(e, 'error in opening conn.');
+    events.close();
+  };
+
+  events.stream();
+};
 
 export default function TextChat() {
+  const [text, setText] = useState('');
+
   const handleKeyPress = (e) => {
     if (e.key === 'Enter' && e.shiftKey) {
       console.log('Enter + Shift');
@@ -9,31 +33,16 @@ export default function TextChat() {
 
     if (e.key === 'Enter' && !e.shiftKey) {
       console.log('Submit Enter');
+      handleSubmit(text);
     }
   };
 
-  const handleSubmit = () => {
-    const events = new EventSource('http://localhost:3050/ask');
-    events.onopen = function () {
-      console.log('connection is opened');
-    };
-
-    events.onmessage = function (e) {
-      console.log(e);
-    };
-
-    events.onerror = function (e) {
-      console.log(e, 'error in opening conn.');
-      events.close();
-    };
-  };
-
   return (
     <>
       <textarea
         className="m-10 h-16 p-4"
         onKeyUp={handleKeyPress}
-        onChange={(e) => console.log(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
     </>
   );