Merge branch 'main' into fix/state-update-api-toggle

Author: nikhiltidke101

custom-implementation/src/components/footer.css

@@ -1,10 +1,10 @@
-.footer a {
+.custom-footer a {
 	text-decoration: none;
 	color: black;
 	cursor: pointer;
 }
 
-.footer html, body, div, applet, object, iframe,
+.custom-footer html, body, div, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
@@ -20,33 +20,30 @@ time, mark, audio, video, button {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font-size: 100%;
-	font: inherit;
 	vertical-align: baseline;
-	line-height: 19px;
 }
 
 
 /* HTML5 display-role reset for older browsers */
-.footer article, aside, details, figcaption, figure, 
+.custom-footer article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 
-.footer ol, ul {
+.custom-footer ol, ul {
 	list-style: none;
 }
 
-.footer blockquote, q {
+.custom-footer blockquote, q {
 	quotes: none;
 }
 
-.footer blockquote:before, blockquote:after, q:before, q:after {
+.custom-footer blockquote:before, blockquote:after, q:before, q:after {
 	content: '';
 	content: none;
 }
 
-.footer table {
+.custom-footer table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

custom-implementation/src/components/footer.tsx

@@ -13,10 +13,10 @@ const Footer = ({ list = [], logo, status, compliance, ...rest }: any) => {
   return (
     <ComponentConfigContext.Provider
       value={{
-        origin: 'https://api.docs.devrev.ai',
+        origin: 'https://developer.devrev.ai',
       }}>
       <SharedFooter
-        className="footer"
+        className="custom-footer"
         list={list}
         logo={logo}
         status={status}

custom-implementation/src/components/header.css

@@ -1,8 +1,8 @@
-.header {
-    background-color: white; 
+.custom-header {
+	z-index: 60;
 }
 
-.header nav a {
+.custom-header nav a {
 	text-decoration: none;
 	color: black;
 	cursor: pointer;

custom-implementation/src/components/header.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import {
   ComponentConfigContext,
   HeaderV30 as SharedHeader,
@@ -11,23 +12,36 @@ const Header = ({
   logo,
   links,
   actions,
-  version,
   collapseOnScroll = true,
 }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 any) => {
+  const html = document.getElementsByTagName('html')[0]
+  const [theme, setTheme] = useState(html.getAttribute('class'))
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setTheme(html.getAttribute('class'))
+    })
+
+    const config = { attributes: true, attributeFilter: ['class'] }
+    observer.observe(html, config)
+    return () => {
+      observer.disconnect()
+    }
+  }, [html])
+
   return (
     <div>
       <ComponentConfigContext.Provider
         value={{
-          origin: 'https://api.docs.devrev.ai',
+          origin: 'https://developer.devrev.ai',
         }}>
         <SharedHeader
           logo={logo}
           items={links}
           actions={actions}
-          version={version}
+          version={theme === 'dark' ? 'light' : 'dark'}
           collapseOnScroll={collapseOnScroll}
-          wrapperClassName="header"
+          wrapperClassName="custom-header"
         />
       </ComponentConfigContext.Provider>
     </div>

custom-implementation/src/main.tsx

@@ -20,16 +20,20 @@ const render = async () => {
   const sidenav = document.querySelector('button.fern-search-bar')
     ?.parentElement as HTMLElement
 
+  const theme = document.getElementsByTagName('html')[0].getAttribute('class')
+
   if (!document.getElementById('theme-switch')) {
     const wrapper = document.createElement('div')
     wrapper.setAttribute('id', 'theme-switch')
     sidenav.appendChild(wrapper)
-
     ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
   }
 
   ReactDOM.render(
-    React.createElement(Header, { ...data.header }),
+    React.createElement(Header, {
+      ...data.header,
+      version: theme == 'dark' ? 'light' : 'dark',
+    }),
     document.getElementById('fern-header'),
     () => {
       // Once the header component is loaded, make it visible

fern.zip

@@ -28,13 +28,13 @@ A connection uses a keyring object to provide authentication, access token refre
 
 ## Event source
 
-[Event sources](/snap-in-development/references/event-sources) collect events from webhooks, emails, and timer-based API calls. Events can also be manually published. DevRev supports the ingestion of webhooks from any source. Each event source is assigned to a dev org.
+[Event sources](/snapin-development/references/event-sources) collect events from webhooks, emails, and timer-based API calls. Events can also be manually published. DevRev supports the ingestion of webhooks from any source. Each event source is assigned to a dev org.
 
 For example, if you want to collect webhook events from an organization's GitHub, create an event source which in turn gives us a URL to subscribe to on GitHub. Webhook events published to this URL are available from this event source.
 
 ## Function
 
-The framework for executing code provided by users is [functions](/snap-in-development/references/functions). Currently, Javascript/TypeScript can be taken as input from the user and deployed as a function.
+The framework for executing code provided by users is [functions](/snapin-development/references/functions). Currently, Javascript/TypeScript can be taken as input from the user and deployed as a function.
 
 Connection values can be passed to a function at runtime, enabling it to execute API calls to DevRev and to external systems such as GitHub, Slack, Bitbucket, and Discord.
 
@@ -44,17 +44,17 @@ Snap-ins can be configured to enable and disable features, based on custom input
 
 ## Commands
 
-A user can trigger [commands](/snap-in-development/references/commands) on different surfaces based on some parameters. Once a command is executed, a function is triggered.
+A user can trigger [commands](/snapin-development/references/commands) on different surfaces based on some parameters. Once a command is executed, a function is triggered.
 
 A developer can develop commands to be included in a snap-in Version along with associated functions. These commands are installed when the snap-in is installed.
 
 As part of the snap-in, commands have access to keyrings, global variables, and event sources.
 
 ## Hooks
 
-[Hooks](/snap-in-development/references/hooks) enable developers to invoke functions when various events in the lifecycle of a snap-in occur. Hooks can be used to perform various actions based on the event such as validating the snap-in inputs and keyrings when the configuration is updated, registering event-sources and webhooks in external platforms when snap-in is activated, or setting custom fields to be used by the snap-in.
+[Hooks](/snapin-development/references/hooks) enable developers to invoke functions when various events in the lifecycle of a snap-in occur. Hooks can be used to perform various actions based on the event such as validating the snap-in inputs and keyrings when the configuration is updated, registering event-sources and webhooks in external platforms when snap-in is activated, or setting custom fields to be used by the snap-in.
 
-Detailed documentation on hooks can be found in the [hooks reference](/snap-in-development/references/hooks).
+Detailed documentation on hooks can be found in the [hooks reference](/snapin-development/references/hooks).
 
 ## States
 
@@ -76,7 +76,7 @@ The following diagram illustrates the transitions between different states.
 
 ## Snap-kit
 
-[Snap-kit](/snap-in-development/references/snapkit) defines UI customization components. It's defined in the snap-in package and used to display developer-defined components. A snap-kit component can display data to a user or collect input for triggering a function.
+[Snap-kit](/snapin-development/references/snapkit) defines UI customization components. It's defined in the snap-in package and used to display developer-defined components. A snap-kit component can display data to a user or collect input for triggering a function.
 
 ## Marketplace
 

fern/docs/pages/concepts.mdx

@@ -10,7 +10,7 @@ A brief [tutorial](/api-reference/getting-started) shows you how to access the A
 
 Specifications covering the supported APIs are based on OpenAPI Specification 3.0. You can download the specs to use an OpenAPI 3.0-compliant tool to perform a variety of actions, including rendering them in UI and generating SDKs. Two [versions](/about/versioning) of the DevRev API are available: [public](/public) and [beta](/beta) (early access). Use the drop-down menu in the upper-left corner of this site to switch between versions.
 
-To take action based on events from the DevRev platform, [webhooks](/guides/getting-started-with-webhooks) are also supported.
+To take action based on events from the DevRev platform, [webhooks](/guides/webhooks) are also supported.
 <Cards>
     <Card
     title="Public"
@@ -27,7 +27,7 @@ To take action based on events from the DevRev platform, [webhooks](/guides/gett
 
 ## 🧩 Snap-ins
 
-Numerous snap-ins are available on the DevRev [Marketplace](https://devrev.ai/marketplace). The [snap-in framework](/snap-in-development/concepts) is available for you to create your own snap-ins for automation of DevRev workflows or integration with other system.
+Numerous snap-ins are available on the DevRev [Marketplace](https://devrev.ai/marketplace). The [snap-in framework](/snapin-development/concepts) is available for you to create your own snap-ins for automation of DevRev workflows or integration with other system.
 
 ## 💻 SDKs
 

fern/docs/pages/developer-intro.mdx

@@ -1,4 +1,5 @@
 A lot of the time, when you're making calls to the DevRev API, there'll be a lot of results to return. For that reason, we paginate the results to make sure responses are easier to handle.
+DevRev API uses a cursor-based pagination to provide consistency and support large data.
 Let's say your initial call is asking to list all the users in an org; the result could be a massive response with hundreds of thousands of pages. That's not a good place to start.
 
 When you make an API call, it returns a cursor with a random code. If there are more pages available, the response will include a field called `next_cursor` which points to the next page.

fern/docs/pages/pagination.mdx

@@ -1,18 +1,28 @@
 Our PLuG widget SDK is a powerful tool designed to further enhance our widget on your website or application. With our SDK, you can seamlessly integrate our feature-rich widget by empowering you to create a dynamic and personalized user experience. Let's get started.
 
-| Method                   | Description                                                                       |
-| ------------------------ | --------------------------------------------------------------------------------- |
-| `plugSDK.init()`         | Initialize the PLuG widget.                                                       |
-| `plugSDK.shutdown()`      | End the user session which is currently initialized in PLuG widget. |
-| `plugSDK.toggleWidget()` | Open/close the widget.                                                         |
-| `plugSDK.onEvent()`      | Perform specific actions based on the payload type received from the PLuG widget. |
-| `plugSDK.toggleTheme('light/dark')` | Toggle PLuG widget theme.                                                          |
-| `plugSDK.toggleWidget(true, 'create_conversation', {startConversationContent: 'Hi',});` | Start a conversation.                                                      |
+## Methods
 
+- `plugSDK.init()` Initialize the PLuG chat widget.
 
-## Initialize the widget
+- `plugSDK.initSearchAgent()` Initialize PLuG search agent.
 
-Calling the `init()` method initializes the PLuG widget on your website. Initializing the PLuG widget is necessary for you to perform any other actions on the PLuG widget SDK.
+- `plugSDK.shutdown()` End the user session which is currently initialized in PLuG widget. 
+
+- `plugSDK.toggleWidget()` Open/close the chat widget.
+
+- `plugSDK.toggleSearchAgent()` Open/close the search agent.
+
+- `plugSDK.onEvent()` Perform specific actions based on the payload type received from the PLuG widget. 
+
+- `plugSDK.toggleTheme('light/dark')` Toggle PLuG widget theme.
+
+- `plugSDK.toggleWidget(true, 'create_conversation', {startConversationContent: 'Hi',});` Start a conversation.
+
+- `plugSDK.prefillSearchQuery(query:"string")` Prefill the search input of the search agent.
+
+## Initialize chat
+
+Calling the `init()` method initializes the PLuG chat widget on your website. Initializing the PLuG widget is necessary for you to perform any other actions on the PLuG widget SDK.
 
 ```jsx 
 useEffect(() => {
@@ -26,6 +36,25 @@ useEffect(() => {
 When React is using `Strict` mode, you might get a warning message from `window.plugSDK.init()` being called multiple times. These errors won't impact the installation and functioning of the widget.
 </Callout>
 
+## Initialize search
+
+Calling the `initSearchAgent()` method initializes the PLuG Search Agent on your website. Initializing search is necessary for you to perform any other actions on the PLuG widget SDK.
+
+```jsx
+useEffect(() => {
+  window.plugSDK.init({
+    app_id: '<your_unique_app_id>',
+    disable_plug_chat_window: true,
+});
+
+  window.plugSDK.onEvent((payload) => {
+    if (payload.type === 'ON_PLUG_WIDGET_READY') {
+      window.plugSDK.initSearchAgent();
+    }
+  });
+}, []);
+```
+
 ## Shutdown the widget
 
 The `shutdown()` method is helpful when you want to end the user session which is currently initialized in the PLuG widget. You can use this method to clear your users' conversations and tickets when they log out of your application.
@@ -49,10 +78,11 @@ Once the `shutdown()` method is called, all the other functionality in the widge
 
 ## Open or close the widget
 
-To control whether the PLuG widget launcher screen is open, you can use the `togglewidget()` method with a boolean value. Your code needs to listen to the event `ON_PLUG_WIDGET_READY` to call this method. If the widget isn't ready then this method won’t make any action.
+To control whether the PLuG widget launcher screen is open, you should use either the `togglewidget()` method with a boolean value or the `toggleSearchAgent()` method, depending on which PLuG instance you are using.
 
 ```jsx
 window.plugSDK.toggleWidget(true);
+window.plugSDK.toggleSearchAgent(true);
 ```
 
 <iframe src="https://codesandbox.io/embed/toggle-plug-with-button-nnkmk3?fontsize=14&hidenavigation=1&module=%2Fsrc%2FTogglePlug.js&theme=dark&view=preview&hidedevtools=1"
@@ -66,12 +96,13 @@ window.plugSDK.toggleWidget(true);
 
 This method can be used to listen to events coming from the PLuG widget. The following are the different `PAYLOAD_TYPES`.
 
-| Event                                | Meaning                                                                                                                            |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `ON_PLUG_WIDGET_CLOSED`              | The PLuG widget is closed.                                                                                                         |
-| `ON_PLUG_WIDGET_OPENED`              | The PLuG widget is opened.                                                                                                         |
-| `ON_PLUG_WIDGET_READY`               | The PLuG widget is ready.                                                                                                          |
-| `ON_PLUG_WIDGET_UNREAD_COUNT_CHANGE` | The user receives a new message to their PLuG. You can also listen to the number of unread messages and display that to your user. |
+- `ON_PLUG_WIDGET_CLOSED` The PLuG widget is closed.
+
+- `ON_PLUG_WIDGET_OPENED` The PLuG widget is opened.
+
+- `ON_PLUG_WIDGET_READY` The PLuG widget is ready.
+- 
+- `ON_PLUG_WIDGET_UNREAD_COUNT_CHANGE` The user receives a new message to their PLuG. You can also listen to the number of unread messages and display that to your user. 
 
 ```jsx
 useEffect(() => {

fern/docs/pages/plug-sdk/methods.mdx

@@ -34,11 +34,11 @@ The publishing process commences by initiating a marketplace submission, which e
 
 ## Get started
 
-To get started with publishing marketplace item, you need DevRev CLI. Refer to [DevRev CLI Cheatsheet](/snap-in-development/references/install-dev-rev-cli) for more information.
+To get started with publishing marketplace item, you need DevRev CLI. Refer to [DevRev CLI Cheatsheet](/snapin-development/references/install-dev-rev-cli) for more information.
 
 ### Create a snap-in
 
-To proceed with making a submission in marketplace, you need a snap-in for which you are creating this submission. If you are new to snap-ins, [follow the development and deployment guide](/snap-in-development/tutorials/overview) to create your first snap-in.
+To proceed with making a submission in marketplace, you need a snap-in for which you are creating this submission. If you are new to snap-ins, [follow the development and deployment guide](/snapin-development/tutorials/overview) to create your first snap-in.
 
 ## Create marketplace listing
 

fern/docs/pages/publish_to_marketplace.mdx

@@ -312,7 +312,7 @@ The `--force` flag deletes the snap-in even if the `deactivate` hook fails. If t
 
 ## Snap-in context
 
-The CLI persists in the context of the CLI in a [snap-in context](#snap-in-context). The context is used to store the following information per snap-in package slug:
+The CLI persists in the context of the CLI in a snap-in context. The context is used to store the following information per snap-in package slug:
 
 1. The ID of the snap-in package owning the slug.
 2. The ID of the last created/upgraded snap-in version, if any.

fern/docs/pages/references/cli.mdx

@@ -1,6 +1,6 @@
 Using functions, you can provide custom code and link it to your event sources, automations, or snap-kit actions. Functions are written in JavaScript and can be used to transform events, send notifications, or perform any other custom logic including network calls.
 
-In order to create a snap-in version, functions must be defined as shown in the [code samples](/snap-in-development/code-samples). Functions are packaged and provided as an artifact at the time of snap-in version creation and then used to deploy functions to snap-in versions. An artifact may contain multiple function definitions. The artifact is a zip file containing the following files:
+In order to create a snap-in version, functions must be defined as shown in the [code samples](/snapin-development/code-samples). Functions are packaged and provided as an artifact at the time of snap-in version creation and then used to deploy functions to snap-in versions. An artifact may contain multiple function definitions. The artifact is a zip file containing the following files:
 
 ```bash
 /
@@ -26,4 +26,4 @@ functions:
 - `name`: It is the function name that should match the corresponding function name in the folder.
 - `description`: It describes the function.
 
-Refer to the [function invocation](/snap-in-development/references/function-invocation) for details about the exact payload of the function.
+Refer to the [function invocation](/snapin-development/references/function-invocation) for details about the exact payload of the function.

fern/docs/pages/references/functions.mdx

@@ -18,9 +18,9 @@ hooks:
     function: update-resource
 ```
 
-The above definition would register the hooks and invoke the provided functions alongside each hook. The functions can be defined in the manifest and provided in the code as explained in the [functions reference](/snap-in-development/references/functions).
+The above definition would register the hooks and invoke the provided functions alongside each hook. The functions can be defined in the manifest and provided in the code as explained in the [functions reference](/snapin-development/references/functions).
 
-For the event schema received by the function invocation, refer to the [function invocation reference](/snap-in-development/references/function-invocation).
+For the event schema received by the function invocation, refer to the [function invocation reference](/snapin-development/references/function-invocation).
 
 The event name is the identifier for the hook. The event name can be used to identify the hook that's being invoked. The identifiers are defined in the summary table below.