feat: cloud config uses latest searchbox version

oramasearch · Oct 1, 2024 · 0283a96 · 0283a96
1 parent 6ceb6f3
commit 0283a96
Show file tree

Hide file tree

Showing 4 changed files with 1,321 additions and 974 deletions.
diff --git a/packages/plugin-docusaurus-v3/package.json b/packages/plugin-docusaurus-v3/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@orama/highlight": "^0.1.5",
     "@orama/orama": "workspace:*",
+    "@orama/react-components": "^0.0.25",
     "@orama/plugin-analytics": "workspace:*",
     "@orama/plugin-parsedoc": "workspace:*",
     "@orama/searchbox": "^1.0.0-rc53",

diff --git a/packages/plugin-docusaurus-v3/src/theme/SearchBar/index.tsx b/packages/plugin-docusaurus-v3/src/theme/SearchBar/index.tsx
@@ -5,6 +5,7 @@ import { useActiveVersion, useVersions } from '@docusaurus/plugin-content-docs/c
 import { useDocsPreferredVersion } from '@docusaurus/theme-common'
 import { usePluginData } from '@docusaurus/useGlobalData'
 import { SearchBox, SearchButton } from '@orama/searchbox'
+import { OramaSearchBox, OramaSearchButton } from '@orama/react-components'
 import { useOrama } from './useOrama'
 
 interface PluginData {
@@ -17,13 +18,15 @@ interface PluginData {
 }
 
 export function OramaSearchNoDocs() {
-  const { searchBoxConfig, colorMode } = useOrama()
+  const { searchBoxConfig, colorMode, clientMode } = useOrama()
+  const SearchButtonComponent = clientMode === 'cloud' ? OramaSearchButton : SearchButton
+  const SearchComponent = clientMode === 'cloud' ? OramaSearchBox : SearchBox
 
   return (
     <div>
-      <SearchButton colorScheme={colorMode} className="DocSearch-Button" />
+      <SearchButtonComponent colorScheme={colorMode} className="DocSearch-Button" />
       {searchBoxConfig && (
-        <SearchBox
+        <SearchComponent
           {...searchBoxConfig}
           colorScheme={colorMode}
           searchParams={{
@@ -43,7 +46,10 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {
   const activeVersion = useActiveVersion(pluginId)
   const { preferredVersion } = useDocsPreferredVersion(pluginId)
   const currentVersion = activeVersion || preferredVersion || versions[0]
-  const { searchBoxConfig, colorMode } = useOrama()
+  const { searchBoxConfig, colorMode, clientMode } = useOrama()
+  const SearchButtonComponent = clientMode === 'cloud' ? OramaSearchButton : SearchButton
+  const SearchComponent = clientMode === 'cloud' ? OramaSearchBox : SearchBox
+
   const searchParams = {
     ...(currentVersion && {
       where: {
@@ -54,9 +60,9 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {
 
   return (
     <div>
-      <SearchButton colorScheme={colorMode} className="DocSearch-Button" />
+      <SearchButtonComponent colorScheme={colorMode} className="DocSearch-Button" />
       {searchBoxConfig && (
-        <SearchBox {...searchBoxConfig} colorScheme={colorMode} searchParams={searchParams} facetProperty="category" />
+        <SearchComponent {...searchBoxConfig} colorScheme={colorMode} searchParams={searchParams} facetProperty="category" />
       )}
     </div>
   )
@@ -66,8 +72,10 @@ export default function OramaSearchWrapper() {
   const { pathname } = useLocation()
   const { docsInstances }: PluginData = usePluginData('@orama/plugin-docusaurus-v3') as PluginData
   const pluginId = docsInstances.filter((id: string) => pathname.includes(id))[0] || docsInstances[0]
+
   if (!pluginId) {
     return <OramaSearchNoDocs />
   }
+
   return <OramaSearchWithDocs pluginId={pluginId} />
 }
diff --git a/packages/plugin-docusaurus-v3/src/theme/SearchBar/useOrama.ts b/packages/plugin-docusaurus-v3/src/theme/SearchBar/useOrama.ts
@@ -1,12 +1,12 @@
-// @ts-nocheck
+//@ts-nocheck
 import { useEffect, useState } from 'react'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import useIsBrowser from '@docusaurus/useIsBrowser'
 import { useColorMode } from '@docusaurus/theme-common'
 import { usePluginData } from '@docusaurus/useGlobalData'
 import { ungzip } from 'pako'
-import { presets } from '@orama/searchbox'
 import { OramaClient } from '@oramacloud/client'
+import { presets } from '@orama/searchbox'
 import { create, insertMultiple } from '@orama/orama'
 import { pluginAnalytics } from '@orama/plugin-analytics'
 import '@orama/searchbox/dist/index.css'
@@ -18,11 +18,12 @@ export const useOrama = () => {
 
   const baseURL = useBaseUrl('orama-search-index-current.json.gz')
   const isBrowser = useIsBrowser()
+
   useEffect(() => {
     async function loadOrama() {
       if (endpoint?.url) {
         setSearchBoxConfig({
-          oramaInstance: new OramaClient({
+          clientInstance: new OramaClient({
             endpoint: endpoint.url,
             api_key: endpoint.key
           })
@@ -79,5 +80,5 @@ export const useOrama = () => {
     })
   }, [isBrowser])
 
-  return { searchBoxConfig, colorMode }
+  return { searchBoxConfig, colorMode, clientMode: endpoint?.url ? 'cloud' : 'oss' }
 }