got the context working

src/components/Sidebar/chat/ChatInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { GiMagicBroom } from 'react-icons/gi'
 import { IoSend } from 'react-icons/io5'
@@ -26,21 +26,6 @@ export function SidebarInput({
   const [text, setText] = useState('')
   const [delayedLoading, setDelayedLoading] = useState(false)
   const { history } = useChatHistory()
-  const pageContentRef = useRef<string>()
-
-  useEffect(() => {
-    const handleWindowMessage = (event: MessageEvent) => {
-      const { action, pageContent } = event.data as {
-        action: string
-        pageContent: string
-      }
-      if (action === 'get-page-content') {
-        pageContentRef.current = pageContent
-      }
-    }
-
-    window.addEventListener('message', handleWindowMessage)
-  }, [])
 
   useEffect(() => {
     const handleLoadingTimeout = setTimeout(() => {
@@ -51,8 +36,22 @@ export function SidebarInput({
     }
   }, [loading])
 
-  const handleSubmit = () => {
-    submitMessage(text, isWebpageContextOn ? pageContentRef.current : undefined)
+  const handleSubmit = async () => {
+    let context
+    if (isWebpageContextOn) {
+      const pageContent = new Promise((resolve) => {
+        window.addEventListener('message', function (event) {
+          if (event.data.action === 'get-page-content') {
+            resolve(event.data.pageContent)
+          }
+        })
+
+        window.parent.postMessage({ action: 'get-page-content' }, '*')
+      })
+      context = (await pageContent) as string
+    }
+    console.log('context', context)
+    submitMessage(text, isWebpageContextOn ? context : undefined)
     setText('')
   }
 

src/pages/content/sidebar.tsx

@@ -17,18 +17,33 @@ iframe.id = 'syncia_sidebar'
 
 document.body.appendChild(iframe)
 
+/**
+ * BG SCRIPT <-> CONTENT SCRIPT
+ * Event listener for messages from the background script.
+ * To open the sidebar, the background script sends a message with the action 'open-sidebar'.
+ * The sidebar is opened by setting the width of the iframe to 400px.
+ */
 chrome.runtime.onMessage.addListener(function (msg) {
-  // ACTION: Open sidebar
   if (msg.action === 'open-sidebar') {
     if (iframe.style.width === '0px') {
       iframe.style.width = '400px'
     } else {
       iframe.style.width = '0px'
     }
   }
+})
+
+/**
+ * SIDEBAR <-> CONTENT SCRIPT
+ * Event listener for messages from the sidebar.
+ * To get the page content, the sidebar sends a message with the action 'get-page-content'.
+ * The page content is sent back to the sidebar by posting a message with the action 'get-page-content'.
+ */
+window.addEventListener('message', (event) => {
+  const { action, _payload } = event.data as { action: string; _payload: any }
 
-  // ACTION: Get Page Content
-  if (msg.action === 'get-page-content') {
+  if (action === 'get-page-content') {
+    console.log('get-page-content Triggered')
     const pageContent = document.body.innerText
     iframe.contentWindow?.postMessage(
       {