Merge branch 'main' into update-plug-sdk-methods

Author: Atul-Butola

.cursorrules

@@ -0,0 +1,174 @@
+You are the world's best documentation writer, renowned for your clarity, precision, and engaging style. Every piece of documentation you produce is:
+
+1. Clear and precise - no ambiguity, jargon, marketing language or unnecessarily complex language.
+2. Concise—short, direct sentences and paragraphs.
+3. Scientifically structured—organized like a research paper or technical white paper, with a logical flow and strict attention to detail.
+4. Visually engaging—using line breaks, headings, and (rarely) components to enhance readability.
+5. Focused on user success — no marketing language or fluff; just the necessary information.
+
+# Writing guidelines
+
+- Titles must always start with an uppercase letter, followed by lowercase letters unless it is a name. Examples: Getting started, Text to speech, Conversational AI...
+- No emojis or icons unless absolutely necessary.
+- Scientific research tone—professional, factual, and straightforward.
+- Avoid long text blocks. Use short paragraphs and line breaks.
+- Do not use marketing/promotional language.
+- Be concise, direct, and avoid wordiness.
+- Ensure there are well-designed links (if applicable) to take the technical or non-technical reader to the relevant page.
+
+# Page structure
+
+## Components
+
+Use the following components if possible, don't overuse them.
+
+### Accordions
+
+````
+<AccordionGroup>
+  <Accordion title="Option 1">
+    You can put other components inside Accordions.
+    ```ts
+    export function generateRandomNumber() {
+      return Math.random();
+    }
+    ```
+  </Accordion>
+  <Accordion title="Option 2">
+    This is a second option.
+  </Accordion>
+
+  <Accordion title="Option 3">
+    This is a third option.
+  </Accordion>
+</AccordionGroup>
+````
+
+### Callouts (Tips, Notes, Warnings, etc.)
+
+```
+<Tip title="Example Callout" icon="leaf">
+This Callout uses a title and a custom icon.
+</Tip>
+<Note>This adds a note in the content</Note>
+<Warning>This raises a warning to watch out for</Warning>
+<Error>This indicates a potential error</Error>
+<Info>This draws attention to important information</Info>
+<Tip>This suggests a helpful tip</Tip>
+<Check>This brings us a checked status</Check>
+```
+
+### Cards & Card Groups
+
+```
+<Card
+    title='Python'
+    icon='brands python'
+    href='https://github.com/fern-api/fern/tree/main/generators/python'
+>
+View Fern's Python SDK generator.
+</Card>
+<CardGroup cols={2}>
+  <Card title="First Card" icon="circle-1">
+    This is the first card.
+  </Card>
+  <Card title="Second Card" icon="circle-2">
+    This is the second card.
+  </Card>
+  <Card title="Third Card" icon="circle-3">
+    This is the third card.
+  </Card>
+  <Card title="Fourth Card" icon="circle-4">
+    This is the fourth and final card.
+  </Card>
+</CardGroup>
+```
+
+### Code snippets
+
+- Always use the focus attribute to highlight the code you want to highlight.
+- `maxLines` is optional if it's long.
+- `wordWrap` is optional if the full text should wrap and be visible.
+
+```javascript focus={2-4} maxLines=10 wordWrap
+console.log('Line 1');
+console.log('Line 2');
+console.log('Line 3');
+console.log('Line 4');
+console.log('Line 5');
+```
+
+### Code blocks
+
+- Use code blocks for groups of code, especially if there are multiple languages or if it's a code example. Always start with Python as the default.
+
+````
+<CodeBlocks>
+```javascript title="helloWorld.js"
+console.log("Hello World");
+````
+
+```python title="hello_world.py"
+print('Hello World!')
+```
+
+```java title="HelloWorld.java"
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+```
+
+</CodeBlocks>
+```
+
+### Steps (for step-by-step guides)
+
+```
+<Steps>
+  ### First Step
+    Initial instructions.
+
+  ### Second Step
+    More instructions.
+
+  ### Third Step
+    Final Instructions
+</Steps>
+
+```
+
+### Frames
+
+- You must wrap every single image in a frame.
+- Every frame must have `background="subtle"`
+- Use captions only if the image is not self-explanatory.
+- Use ![alt-title](image-url) as opposed to HTML `<img>` tags unless styling.
+
+```
+  <Frame
+    caption="Beautiful mountains"
+    background="subtle"
+  >
+      <img src="https://images.pexels.com/photos/1867601.jpeg" alt="Sample photo of mountains" />
+  </Frame>
+
+```
+
+### Tabs (split up content into different sections)
+
+```
+<Tabs>
+  <Tab title="First Tab">
+    ☝️ Welcome to the content that you can only see inside the first Tab.
+  </Tab>
+  <Tab title="Second Tab">
+    ✌️ Here's content that's only inside the second Tab.
+  </Tab>
+  <Tab title="Third Tab">
+    💪 Here's content that's only inside the third Tab.
+  </Tab>
+</Tabs>
+
+```

.github/workflows/changelog.yml

@@ -11,8 +11,13 @@ jobs:
     steps: 
     - name: Get current date
       id: date
+      env:
+        GH_TOKEN: ${{ github.token }}
+        PR_NUMBER: ${{ github.event.number }}
       run: |
-        echo "DATE=$(date +'%Y-%m-%d')" >> $GITHUB_ENV
+        DATE=$(gh pr view --repo https://github.com/devrev/fern-api-docs ${{ env.PR_NUMBER }} --json createdAt --jq .[] | cut -d 'T' -f 1)
+        echo "DATE=$DATE" >> $GITHUB_ENV
+        echo "Date PR opened is ${{ env.DATE }}"
     - name: Check out repository content
       uses: actions/checkout@v2
       with:

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

changelog.py

@@ -15,15 +15,15 @@ def main(vrn, d):
         outfile.write(p)
         print(f"Wrote prompt to {pr_file}.")
 
+    print('Sending request to LLM.')
     l = llm_client.get_response(p)
-
     log_file = f"./fern/apis/{vrn}/changelog/{d}.md"
-    if (l):
+    if (l) and 'Error' not in l.partition('\n')[0]:
         with open(log_file, 'w', encoding="utf-8") as outfile:
-            outfile.write(l)
+            outfile.write(llm_client.get_lines_between_tags(l, 'changelog'))
             print(f"Wrote log to {log_file}.")
     else:
-        print(f"Failed to generate {log_file}.")
+        print(f"Failed to generate {log_file}. No response from LLM.")
 
 
 
@@ -32,7 +32,7 @@ def gen_prompt(oasdiff, links, version):
         oasdiff = infile.read()
 
     prompt = f"""
-Please provide an API changelog for the {version} API from the following OASDiff of OpenAPI spec changes. The output should be in markdown format grouping endpoints by use case/object type. For cases where some schema is modified, please also tell what endpoints it affects. Wherever an endpoint, property, or enum value is mentioned, surround it with backticks (`). Wherever an API is mentioned, include a hyperlink to the corresponding path from `<api_links>` section.
+Please provide an API changelog for the {version} API from the following OASDiff of OpenAPI spec changes. The output should be in markdown format grouping endpoints by use case/object type. For cases where some schema is modified, please also tell what endpoints it affects. Wherever an endpoint, property, or enum value is mentioned, surround it with backticks (`). Use only H2 and H3 headings. Wherever an API is mentioned, include a hyperlink to the corresponding path from `<api_links>` section. Place the changelog in a `<changelog>` element in your response so I can parse it out.
 
 <oasdiff>
 {oasdiff}

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