add: plug script

.github/workflows/fern-check.yml

@@ -20,6 +20,7 @@ jobs:
           registry-url: https://npm.pkg.github.com/
         env:
           NODE_AUTH_TOKEN: ${{secrets.AUTH_TOKEN}}
+
 
       - name: Build Navigation
         run: |

.github/workflows/preview-docs.yml

@@ -22,6 +22,7 @@ jobs:
           registry-url: https://npm.pkg.github.com/
         env:
           NODE_AUTH_TOKEN: ${{secrets.AUTH_TOKEN}}
+
 
       - name: Install Fern
         run: npm install -g fern-api

.github/workflows/publish-docs.yml

@@ -21,6 +21,7 @@ jobs:
           registry-url: https://npm.pkg.github.com/
         env:
           NODE_AUTH_TOKEN: ${{secrets.AUTH_TOKEN}}
+
 
       - name: Download Fern
         run: npm install -g fern-api

.github/workflows/publish-typescript.yml

@@ -28,6 +28,7 @@ jobs:
           registry-url: https://npm.pkg.github.com/
         env:
           NODE_AUTH_TOKEN: ${{secrets.AUTH_TOKEN}}
+
 
       - name: Build Navigation
         run: |

custom-implementation/src/components/search.tsx

@@ -0,0 +1,38 @@
+export const Search = () => {
+  return (
+    <button
+      id="fern-search-button"
+      className="fern-search-bar w-full"
+      style={{ marginBottom: '8px' }}
+      onClick={() => {
+        if ((window as any).plugSDK) {
+          (window as any).plugSDK.toggleSearchAgent()
+        }
+      }}>
+      <span className="search-placeholder">
+        <svg
+          width="1.5em"
+          height="1.5em"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          color="currentColor"
+          className="size-icon-md">
+          <path
+            d="M17 17L21 21"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"></path>
+          <path
+            d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"></path>
+        </svg>
+        <span>Search...</span>
+      </span>
+      <kbd className="keyboard-shortcut-hint">/</kbd>
+    </button>
+  )
+}

custom-implementation/src/main.tsx

@@ -7,6 +7,8 @@ import React from 'react'
 
 import Header from './components/header'
 import Footer from './components/footer'
+
+import { Search } from './components/search'
 import { ThemeSwitch } from './components/theme-switch'
 
 import { getPageData } from './modules/sanity/utils'
@@ -22,16 +24,28 @@ const render = async () => {
    */
 
   const data = await getPageData()
+
   const sidenav = document.querySelector('button.fern-search-bar')
     ?.parentElement as HTMLElement
 
   const theme = document.getElementsByTagName('html')[0].getAttribute('class')
 
-  if (!document.getElementById('theme-switch')) {
+  if (!document.getElementById('sidenav-header-wrapper')) {
+    const sidenavHeaderWrapper = document.createElement('div')
+    sidenavHeaderWrapper.setAttribute('id', 'sidenav-header-wrapper')
+    sidenav.appendChild(sidenavHeaderWrapper)
+
+    const search = document.createElement('div')
+    search.setAttribute('id', 'search-component')
+    sidenavHeaderWrapper.appendChild(search)
+    ReactDOM.render(React.createElement(Search), search)
+
     const wrapper = document.createElement('div')
     wrapper.setAttribute('id', 'theme-switch')
-    sidenav.appendChild(wrapper)
+    sidenavHeaderWrapper.appendChild(wrapper)
     ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
+
+    sidenav.replaceWith(sidenavHeaderWrapper)
   }
 
   const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID)
@@ -92,11 +106,46 @@ const render = async () => {
       if (footer) footer.style.display = 'block'
     },
   )
+
+  // Add Plug component directly to body
+  if (!document.getElementById('plug-platform')) {
+    const plugScript = document.createElement('script')
+    plugScript.setAttribute('type', 'text/javascript')
+    plugScript.setAttribute('id', 'plug-platform')
+    plugScript.setAttribute('src', 'https://plug-platform.devrev.ai/static/plug.js')
+    document.body.appendChild(plugScript)
+
+    // Initialize Plug SDK after script loads
+    plugScript.onload = () => {
+      if ((window as any).plugSDK) {
+        (window as any).plugSDK?.init?.({
+          app_id: data?.plug?.id,
+          enable_session_recording: true,
+        });
+
+        // Wait for the widget to be ready before adding event listeners
+        (window as any).plugSDK.onEvent((payload: any) => {
+          if(payload.type === "ON_PLUG_WIDGET_READY") {
+            // Initialize search agent after widget is ready
+            (window as any).plugSDK.initSearchAgent();
+
+            // Add keyboard shortcut for search agent
+            document.addEventListener("keydown", function(event) {
+              // Check if event.key is defined before accessing it
+              if (event && event.key === "/") {
+                event.preventDefault();
+                (window as any).plugSDK.toggleSearchAgent();
+              }
+            });
+          }
+        }); 
+      }
+    }
+  }
 }
 
 let observations = 0
 document.addEventListener('DOMContentLoaded', async () => {
-  console.log('DOMContentLoaded')
   await render()
   new MutationObserver(async (e, o) => {
     await render()

custom-implementation/src/modules/sanity/utils.ts

@@ -15,6 +15,7 @@ export const SANITY_TYPES = {
 export const getPageData = async (): Promise<{
   header: object
   footer: object
+  plug: { id: string }
 }> => {
   const header = await CLIENT.fetch(
     `*[_type == 'headerV2' && slug.current == 'developer']{
@@ -28,5 +29,11 @@ export const getPageData = async (): Promise<{
       }[0]`,
   )
 
-  return { header, footer }
+  const plug = await CLIENT.fetch(
+    `*[_type == 'externalLink' && slug.current == 'devrev-plug-app-id']{
+         "id": href
+      }[0]`,
+  )
+
+  return { header, footer, plug }
 }