feat(js): Document JS based hybrid mode, fix JS packages (#2916)

* feat(js): Document JS based hybrid mode, fix JS packages

* update: add model onOpen to docs

examples/demo-js/src/main.ts

@@ -30,7 +30,10 @@ function logSidepanelState(instance: SidepanelInstance, label: string): void {
   });
 }
 
-const sidepanelInstance = sidepanel({
+let docsearchInstance: DocSearchInstance | undefined = undefined;
+let sidepanelInstance: SidepanelInstance | undefined = undefined;
+
+sidepanelInstance = sidepanel({
   container: '#docsearch-sidepanel',
   indexName: 'docsearch',
   appId: 'PMZUYBQDAK',
@@ -43,6 +46,7 @@ const sidepanelInstance = sidepanel({
   onOpen: () => {
     // eslint-disable-next-line no-console
     console.log('[demo-js] sidepanel onOpen()');
+    docsearchInstance?.close();
   },
   onClose: () => {
     // eslint-disable-next-line no-console
@@ -63,13 +67,13 @@ console.log('[demo-js] sidepanel try:', {
 });
 logSidepanelState(sidepanelInstance, 'sidepanel initial state');
 
-const docsearchInstance = docsearch({
+docsearchInstance = docsearch({
   container: '#docsearch',
   indexName: 'docsearch',
   appId: 'PMZUYBQDAK',
   apiKey: '24b09689d5b4223813d9b8e48563c8f6',
   interceptAskAiEvent: (initialMessage: InitialAskAiMessage) => {
-    docsearchInstance.close();
+    docsearchInstance?.close();
     sidepanelInstance.open(initialMessage);
     return true;
   },
@@ -80,6 +84,7 @@ const docsearchInstance = docsearch({
   onOpen: () => {
     // eslint-disable-next-line no-console
     console.log('[demo-js] docsearch onOpen()');
+    sidepanelInstance.close();
   },
   onClose: () => {
     // eslint-disable-next-line no-console

packages/docsearch-js/tsdown.config.ts

@@ -22,6 +22,7 @@ const sharedConfig: UserConfig = {
     js: '.js',
   }),
   sourcemap: true,
+  noExternal: ['@docsearch/react', '@docsearch/core'],
 };
 
 export default defineConfig([

packages/docsearch-sidepanel-js/tsdown.config.ts

@@ -22,6 +22,7 @@ const sharedConfig: UserConfig = {
     js: '.js',
   }),
   sourcemap: true,
+  noExternal: ['@docsearch/react', '@docsearch/core'],
 };
 
 export default defineConfig([

packages/website/docs/sidepanel/hybrid.mdx

@@ -5,10 +5,6 @@ title: Hybrid Mode
 import Tabs from  '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-:::info
-Currently Hybrid Mode is only available when using the React usage approach. Hybrid Mode is not available in the JavaScript-only (vanilla) integration.
-:::
-
 ## Introduction
 
 Sidepanel can run alongside the DocSearch Modal through what we call "Hybrid Mode." When a user initiates an Ask AI action from within
@@ -20,15 +16,19 @@ the continuation of the conversation.
 To set up the Hybrid Mode experience, you will need the following:
 
 - [DocSearch Modal][1] packages installed
-- Sidepanel Component package installed
+- [Sidepanel Component][2] package installed
 
-The Sidepanel Component package can be installed as follows:
+The needed packages can be installed as follows:
 
 <Tabs>
 <TabItem value="npm">
 
 ```bash
-npm install @docsearch/sidepanel
+npm install @docsearch/css @docsearch/modal @docsearch/sidepanel
+
+# Or if using JS based packages
+
+npm install @docsearch/css @docsearch/js @docsearch/sidepanel-js
 ```
 
 </TabItem>
@@ -36,7 +36,11 @@ npm install @docsearch/sidepanel
 <TabItem value="yarn">
 
 ```bash
-yarn add @docsearch/sidepanel
+yarn add @docsearch/css @docsearch/modal @docsearch/sidepanel
+
+# Or if using JS based packages
+
+yarn add @docsearch/css @docsearch/js @docsearch/sidepanel-js
 ```
 
 </TabItem>
@@ -44,7 +48,11 @@ yarn add @docsearch/sidepanel
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @docsearch/sidepanel
+pnpm add @docsearch/css @docsearch/modal @docsearch/sidepanel
+
+# Or if using JS based packages
+
+pnpm add @docsearch/css @docsearch/js @docsearch/sidepanel-js
 ```
 
 </TabItem>
@@ -52,7 +60,11 @@ pnpm add @docsearch/sidepanel
 <TabItem value="bun">
 
 ```bash
-bun add @docsearch/sidepanel
+bun add @docsearch/css @docsearch/modal @docsearch/sidepanel
+
+# Or if using JS based packages
+
+bun add @docsearch/css @docsearch/js @docsearch/sidepanel-js
 ```
 
 </TabItem>
@@ -64,6 +76,9 @@ bun add @docsearch/sidepanel
 
 Once everything is installed, you can set up Hybrid Mode as such:
 
+<Tabs>
+<TabItem value="React">
+
 ```tsx
 import { DocSearch } from '@docsearch/core';
 import { DocSearchButton, DocSearchModal } from '@docsearch/modal';
@@ -97,4 +112,56 @@ function HybridMode() {
 
 There is no manual opt-in for Hybrid Mode to work. When both the Modal and Sidepanel are rendered inside the same `<DocSearch>` context, Hybrid Mode is enabled automatically. No additional configuration is required.
 
+</TabItem>
+
+<TabItem value="JavaScript">
+
+```html
+<div id="docsearch"></div>
+<div id="sidepanel"></div>
+```
+
+```js
+import docsearch from '@docsearch/js';
+import sidepanel from '@docsearch/sidepanel-js';
+
+import '@docsearch/css/dist/style.css';
+import '@docsearch/css/dist/sidepanel.css';
+
+let docsearchInstance = undefined;
+let sidepanelInstance = undefined;
+
+sidepanelInstance = sidepanel({
+  container: "#sidepanel",
+  indexName: "YOUR_INDEX_NAME",
+  appId: "YOUR_APP_ID",
+  apiKey: "YOUR_SEARCH_API_KEY",
+  assistantId: "YOUR_ASSISTANT_ID",
+  onOpen: () => {
+    docsearchInstance?.close();
+  }
+});
+
+docsearchInstance = docsearch({
+  container: "#docsearch",
+  indexName: "YOUR_INDEX_NAME",
+  appId: "YOUR_APP_ID",
+  apiKey: "YOUR_SEARCH_API_KEY",
+  askAi: "YOUR_ASSISTANT_ID",  // Or configuration object
+  interceptAskAiEvent: (initialMessage) => {
+    docsearchInstance?.close();
+    sidepanelInstance.open(initialMessage);
+    return true;
+  },
+  onOpen: () => {
+    sidepanelInstance?.close();
+  }
+});
+
+```
+
+</TabItem>
+</Tabs>
+
 [1]: /docs/docsearch#installation
+[2]: /docs/sidepanel/getting-started#installation