docs(website): add RunLLM agent back to website (#1775)

WIP shouldn't disrupt anything.

Author: jhellerstein

docs/docs/hydro/index.mdx

@@ -23,10 +23,10 @@ style={{
 }}
 src="https://www.youtube.com/embed/LdZ94m7anTw?si=5duyR1MjSRRdPJId"
 title="YouTube video player"
-frameborder="0"
+frameBorder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-referrerpolicy="strict-origin-when-cross-origin"
-allowfullscreen
+referrerPolicy="strict-origin-when-cross-origin"
+allowFullScreen
 ></iframe>
 
 :::caution

docs/docusaurus.config.js

@@ -10,7 +10,7 @@ const katex = require("rehype-katex");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Hydro - Build for Every Scale",
-  tagline: "Dinosaurs are cool",
+  tagline: "Build for every scale",
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
@@ -152,6 +152,11 @@ const config = {
             label: "GitHub",
             position: "right",
           },
+          {
+            href: "/askai",
+            label: "AI Assistant",
+            position: "right",
+          },
         ],
       },
       footer: {

docs/src/pages/askai.js

@@ -0,0 +1,71 @@
+import React, { useEffect } from "react";
+import { useLocation } from "@docusaurus/router";
+import Layout from "@theme/Layout";
+
+import styles from "./askai.module.css";
+
+export default function AskAI() {
+  const location = useLocation(); // Track current route
+
+  useEffect(() => {
+    const scriptId = "runllm-widget-script";
+
+    // Check if script is already added
+    if (!document.getElementById(scriptId)) {
+      const script = document.createElement("script");
+      script.type = "module";
+      script.id = scriptId;
+      script.src = "https://widget.runllm.com";
+
+      script.setAttribute("version", "stable");
+      script.setAttribute("runllm-keyboard-shortcut", "Mod+j");
+      script.setAttribute("runllm-name", "Hydro");
+      script.setAttribute("runllm-position", "TOP_RIGHT");
+      script.setAttribute("runllm-assistant-id", "136");
+      script.setAttribute("runllm-preset", "docusaurus");
+      script.setAttribute("runllm-brand-logo", "img/hydro-turtle.png");
+
+      script.async = true;
+      document.body.appendChild(script);
+    }
+
+    const removeWidget = () => {
+      // Remove script
+      const existingScript = document.getElementById(scriptId);
+      if (existingScript) {
+        existingScript.remove();
+      }
+
+      // Remove widget and any associated elements
+      const removeElements = () => {
+        document
+          .querySelectorAll("runllm-widget, iframe[src*='widget.runllm.com'], .runllm-container")
+          .forEach((el) => el.remove());
+      };
+
+      // Try removing immediately and again after a short delay
+      removeElements();
+      setTimeout(removeElements, 1000);
+    };
+
+    return () => {
+      removeWidget();
+    };
+  }, [location.pathname]); // Runs effect on every route change
+
+  return (
+    <Layout description="AI assistant for the Hydro API">
+      <main>
+        <div className={styles["main_text"]}>  
+          <h2> Hydro AI Assistant </h2>
+          <p>
+            Hydro has a built-in AI assistant that can help you with your
+            questions about the Hydro API. You can ask it anything related to
+            Hydro, and it will try its best to answer you.
+          </p>
+          <p>To give it a try, just press the "Ask AI" button.</p>
+        </div>
+      </main>
+    </Layout>
+  );
+}

docs/src/pages/askai.module.css

@@ -0,0 +1,31 @@
+.subtitle {
+  font-family: 'Inter', sans-serif;
+  font-size: 50px;
+  text-align: center;
+  font-weight: 600;
+  margin-top: 25px;
+  margin-bottom: 0;
+}
+
+.main_text {
+  text-align: Left;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.4;
+
+  color: #262626;
+
+  margin-top: 20px;
+  margin-bottom: 10px;
+
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+@media screen and (max-width: 1000px) {
+  .subtitle {
+    font-size: 40px;
+    margin-top: 30px;
+  }
+}

docs/src/pages/index.js

@@ -81,10 +81,10 @@ export default function Home() {
                 }}
                 src="https://www.youtube.com/embed/LdZ94m7anTw?si=5duyR1MjSRRdPJId"
                 title="YouTube video player"
-                frameborder="0"
+                frameBorder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin"
-                allowfullscreen
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
               ></iframe>
             </div>
           </div>

docs/src/pages/people.js

@@ -13,7 +13,7 @@ import natacha from "./people-img/natacha.jpeg";
 import shadaj from "./people-img/shadaj.png";
 import lucky from "./people-img/lucky.jpeg";
 import rohit from "./people-img/rohit.jpg";
-import hydroTurtle from "./people-img/hydro-turtle.png";
+import hydroTurtle from "../../static/img/hydro-turtle.png";
 
 import styles from "./people.module.css";