add: plug script (#224)

* add: plug script

* feat: integrate Plug SDK into main application

* Remove Plug component implementation from the codebase.

* Remove unused Plug component import from main application file.

* chore: add @types/node to devDependencies in package.json

* fix: update Plug SDK initialization to use dynamic app ID from fetched data

- Changed the app ID assignment in the Plug SDK initialization to retrieve the ID from the fetched data instead of using an environment variable.
- Updated the `getPageData` function to include the `plug` object containing the ID fetched from the Sanity database.

* feat: add search component and integrate into main application

- Introduced a new `Search` component to facilitate search functionality.
- Integrated the `Search` component into the main application, replacing the existing search button with the new component.
- Ensured the search button is rendered only if certain conditions are met, enhancing the application's dynamic behavior.

* refactor: comment out theme switch and search component initialization

- Commented out the initialization code for the `ThemeSwitch` and `search-component-wrapper` to streamline the rendering process.
- This change prepares the code for potential future enhancements without removing the existing structure.

* refactor: streamline search component integration

- Removed commented-out code for `theme-switch` initialization and adjusted the rendering logic for the `Search` component.
- The `Search` component is now directly appended to the `searchWrapper`, enhancing the structure and clarity of the rendering process.

* refactor: remove unused sidenav code from main application

- Eliminated the unused sidenav code related to the search bar to enhance code clarity and maintainability.
- This change contributes to a cleaner rendering process in the main application.

* refactor: update search component integration in main application

- Replaced the search button with the search component by targeting the parent element of the button.
- Enhanced the rendering logic to ensure the search component is integrated correctly within the sidebar.
- This change improves the clarity and maintainability of the rendering process.

* refactor: comment out search component rendering logic

- Commented out the rendering logic for the `Search` component and `ThemeSwitch` to streamline the integration process.
- This change maintains the existing structure while preparing for potential future enhancements.

* refactor: comment out theme switch and search component imports

* refactor: integrate theme switch and search components into main application

* refactor: integrate search component rendering into main application

* feat: implement event handling for Plug SDK in main application

* refactor: update key event handling for search agent activation

* refactor: comment out search component rendering logic

* refactor: restore search component rendering logic in main application

* refactor: reorder imports for theme switch and search components in main application

* refactor: enhance event logging for Plug SDK integration in main application

* feat: add Widget component for Plug SDK integration in main application

* feat: replace Widget component with Plug SDK integration in main application

* refactor: restructure sidenav to include header wrapper for theme switch and search components in main application

* refactor: improve event handling for Plug SDK widget readiness in main application

* refactor: update sidenav structure and search button styling in main application

* refactor: adjust rendering order of theme switch and search components in main application

* refactor: remove PLUG_APP_ID environment variable from workflow files

* refactor: remove @types/node dependency from custom implementation package

* refactor: remove Widget component from custom implementation package

Author: nikhiltidke101

.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 }
 }