diff --git a/src/App.jsx b/src/App.jsx
index 2b4899d7a3..883bc73c13 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import TextChat from './components/TextChat';
 
 const App = () => {
 
@@ -7,7 +8,8 @@ const App = () => {
       <div className="w-80 bg-slate-800"></div>
       <div className="flex h-full w-full flex-col bg-gray-50 ">
         <div className="flex-1 overflow-y-auto"></div>
-        <textarea className="m-10 h-16 p-4" onChange={(e) => console.log(e.target.value)}/>
+        {/* <textarea className="m-10 h-16 p-4" onChange={(e) => console.log(e.target.value)}/> */}
+        <TextChat />
       </div>
     </div>
   );
diff --git a/src/components/TextChat.jsx b/src/components/TextChat.jsx
new file mode 100644
index 0000000000..6024ce321e
--- /dev/null
+++ b/src/components/TextChat.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import EventSource from 'eventsource';
+
+export default function TextChat() {
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && e.shiftKey) {
+      console.log('Enter + Shift');
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      console.log('Submit Enter');
+    }
+  };
+
+  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)}
+      />
+    </>
+  );
+}