hook up apollo echo service to docs UI

src/theme/Root.js

@@ -1,6 +1,37 @@
 import React, { useEffect } from 'react';
 import { useLocation } from '@docusaurus/router';
 
+
+const APOLLO_URL = 'http://localhost:3001/services/echo'
+
+// Explain some text
+async function explain(text) {
+  try {
+    console.log(' Explaining paragraph')
+    console.log(text)
+    // lets call apollo's echo endpoint for now
+
+    const payload = {
+      text,
+      page: window.location.href
+    }
+
+    const response = await fetch(APOLLO_URL, {
+      method:'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'content-type': 'application/json',
+      },
+    })
+
+    const json = await response.text()
+    console.log(json)
+    return json
+  } catch (e) {
+      console.error(e)
+  }
+}
+
 export default function Root({ children }) {
   const location = useLocation();
 
@@ -12,13 +43,13 @@ export default function Root({ children }) {
         if (!paragraph.querySelector('.ai-helper-icon')) {
           const icon = document.createElement('span');
 
-          const content = paragraph.innerHTML;
-          console.log(content);
-
-          const search = paragraph.textContent.split(' ').join('+');
-          const url = `https://letmegooglethat.com/?q=${search}`;
+          icon.title = "Explain this with AI"
           icon.className = 'ai-helper-icon';
           icon.innerHTML = '<button class="sparkle-button">✨</button>';
+
+          icon.onclick = () => {
+            explain(paragraph.textContent)
+          }
 
           paragraph.append(icon);
         }