diff --git a/embedded-app/src/App.jsx b/embedded-app/src/App.jsx
index 105fdd30..5e689500 100644
--- a/embedded-app/src/App.jsx
+++ b/embedded-app/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import AnythingLLMLogo from "./assets/anything-llm-dark.png";
 import "./App.css";
 import { v4 } from "uuid";
@@ -8,6 +8,8 @@ export default function App() {
   const [isOpen, setIsOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [userId, setUserId] = useState("");
+  const [chatMessages, setChatMessages] = useState([]);
+  const eventSourceRef = useRef(null);
 
   useEffect(() => {
     let id = localStorage.getItem("userId");
@@ -25,24 +27,30 @@ export default function App() {
     // }
   };
 
+  const handleChat = (chatResult) => {
+    setChatMessages((prev) => [...prev, chatResult]);
+    if (chatResult.close) {
+      eventSourceRef.current?.abort();
+      console.log("message stream completed");
+    }
+  };
+
   const streamMessages = async () => {
     const ctrl = new AbortController();
+    eventSourceRef.current = ctrl;
+
     await fetchEventSource(
       `http://localhost:3001/api/workspace/hello/stream-chat`,
       {
         method: "POST",
-        body: JSON.stringify({ message, mode: "query" }),
+        body: JSON.stringify({ message, mode: "chat" }),
         // headers: baseHeaders(),
         signal: ctrl.signal,
         openWhenHidden: true,
-        async onopen(response) {
+        onopen(response) {
           if (response.ok) {
-            return; // everything's good
-          } else if (
-            response.status >= 400 &&
-            response.status < 500 &&
-            response.status !== 429
-          ) {
+            // everything's good
+          } else {
             handleChat({
               id: v4(),
               type: "abort",
@@ -52,26 +60,16 @@ export default function App() {
               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) {
+        onmessage(msg) {
           try {
             const chatResult = JSON.parse(msg.data);
-            console.log(chatResult);
+            console.log("chatResult: ", chatResult);
             handleChat(chatResult);
-          } catch {}
+          } catch (error) {
+            console.error("Error parsing message:", error);
+          }
         },
         onerror(err) {
           handleChat({
@@ -83,32 +81,9 @@ export default function App() {
             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 () => {
@@ -137,6 +112,9 @@ export default function App() {
       });
   };
 
+  console.log("chatMessages: ", chatMessages);
+  console.log("isOpen: ", isOpen);
+
   return (
     <div className="fixed bottom-0 right-0 mb-4 mr-4 z-50">
       <div
@@ -166,6 +144,11 @@ export default function App() {
                 ></input>
                 <button onClick={sendMessage}>Send message</button>
               </div>
+              <div className="chat-messages">
+                {chatMessages.map((msg) => (
+                  <p key={msg.id}>{msg.textResponse || msg.error}</p>
+                ))}
+              </div>
             </div>
             <p className="mt-4 text-md text-blue-500 hover:text-opacity-30 text-center hover:cursor-pointer">
               Learn more
@@ -186,148 +169,6 @@ export default function App() {
   );
 }
 
-// import { useState } from 'react';
-// import AnythingLLMLogo from './assets/anything-llm-dark.png';
-
-// function App() {
-//   const [isOpen, setIsOpen] = useState(false);
-//   const [count, setCount] = useState(0);
-//   const [message, setMessage] = useState('');
-
-//   const toggleOpen = () => setIsOpen(!isOpen);
-
-//   const sendMessage = () => {
-//     console.log(message);
-//     fetch('http://localhost:3001/api/workspace/1/embedded-chat', {
-//       method: 'POST',
-//       body: JSON.stringify({
-//         message: message,
-//       }),
-//     })
-//       .then((response) => response.json())
-//       .then((data) => {
-//         console.log('Success:', data);
-//       })
-//       .catch((error) => {
-//         console.error('Error:', error);
-//       });
-//   }
-
-//   const containerStyle = {
-//     position: 'fixed',
-//     bottom: '1rem',
-//     right: '1rem',
-//     zIndex: 50,
-//     transition: 'all 300ms ease-in-out',
-//     maxWidth: isOpen ? '20rem' : '4rem',
-//     padding: isOpen ? '1rem' : '0',
-//     backgroundColor: isOpen ? 'white' : 'transparent',
-//     borderRadius: isOpen ? '0.5rem' : '9999px',
-//     border: isOpen ? '1px solid rgba(0, 0, 0, 0.1)' : 'none',
-//     boxShadow: isOpen ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' : 'none',
-//     width: isOpen ? 'auto' : '4rem',
-//     height: isOpen ? 'auto' : '4rem',
-//   };
-
-//   const buttonStyle = {
-//     padding: '0.5rem 1rem',
-//     backgroundColor: '#3B82F6',
-//     color: 'white',
-//     borderRadius: '0.25rem',
-//     transition: 'background-color 300ms',
-//     cursor: 'pointer',
-//   };
-
-//   const toggleButtonStyle = {
-//     position: 'absolute',
-//     top: '0',
-//     right: '0',
-//     width: '4rem',
-//     height: '4rem',
-//     borderRadius: '9999px',
-//     backgroundColor: isOpen ? 'white' : '#3B82F6',
-//     cursor: 'pointer',
-//     display: 'flex',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//     fontSize: '1.5rem',
-//   };
-
-//   const logoStyle = {
-//     padding: isOpen ? '2.5rem' : '0',
-//   };
-
-//   const cardStyle = {
-//     marginTop: '1rem',
-//     padding: '1rem',
-//     backgroundColor: '#F3F4F6',
-//     borderRadius: '0.25rem',
-//     display: 'flex',
-//     flexDirection: 'column',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//   };
-
-//   const codeStyle = {
-//     backgroundColor: '#E5E7EB',
-//     borderRadius: '0.25rem',
-//     padding: '0.25rem',
-//   };
-
-//   return (
-//     <div style={containerStyle}>
-//       {isOpen && (
-//         <>
-//           <div style={{ display: 'flex', justifyContent: 'center' }}>
-//             <img style={logoStyle} src={AnythingLLMLogo} alt='AnythingLLM Logo' />
-//           </div>
-//           <h1 style={{ fontSize: '1.125rem', textAlign: 'center', fontWeight: '600' }}>Hello from Embedded App 👋</h1>
-//           <div style={cardStyle}>
-//             <button
-//               onClick={() => setCount((count) => count + 1)}
-//               style={buttonStyle}
-//               onMouseEnter={() => (buttonStyle.backgroundColor = '#2563EB')}
-//               onMouseLeave={() => (buttonStyle.backgroundColor = '#3B82F6')}
-//             >
-//               count is {count}
-//             </button>
-//             <p style={{ marginTop: '0.5rem' }}>
-//               Edit <code style={codeStyle}>src/App.jsx</code> and save to test HMR
-//             </p>
-//             <div className='flex'>
-//               <input onChange={(e) => setMessage(e.target.value)} placeholder='Enter a message...'></input>
-//               <button onClick={sendMessage}>Send message</button>
-//             </div>
-//           </div>
-//           <p style={{ marginTop: '1rem', fontSize: '1rem', color: '#2563EB', textAlign: 'center', cursor: 'pointer', opacity: '0.5' }}>
-//             Learn more
-//           </p>
-//         </>
-//       )}
-//       <button
-//         onClick={toggleOpen}
-//         style={toggleButtonStyle}
-//         aria-label="Toggle Menu"
-//       >
-//         {isOpen ? 'X' : '+'}
-//       </button>
-//     </div>
-//   );
-// }
-
-// export default App;
-
-// Script to load the embedded-anything-llm.umd.js on page with <script></script>
-// var script = document.createElement('script');
-// script.src = 'http://localhost:5000/embedded-anything-llm.umd.js';
-// script.onload = function() {
-//     console.log('Script loaded successfully.');
-// };
-// script.onerror = function() {
-//     console.error('An error occurred while loading the script.');
-// };
-// document.body.appendChild(script);
-
 // SCRIPT TO LOAD THE EMBEDDED-ANYTHING-LLM.UMD.JS ON PAGE WITH <SCRIPT></SCRIPT>
 // var script = document.createElement('script');
 // script.src = 'http://localhost:5000/embedded-anything-llm.umd.js';