docs: improvements (#764)

packages/docs/astro.config.mjs

@@ -79,7 +79,6 @@ export default defineConfig({
     },
     components: {
       Sidebar: "./src/components/Sidebar.astro",
-      Hero: "./src/components/Hero.astro",
       Header: "./src/components/Header.astro",
       Search: "./src/components/Search.astro",
       Head: "./src/components/Head.astro"

packages/docs/package.json

@@ -30,9 +30,8 @@
     "@jop-software/astro-cookieconsent": "^3.0.0",
     "@orama/crawly": "^0.0.6",
     "@orama/orama": "^2.0.21",
-    "@orama/react-components": "^0.0.15",
-    "@orama/searchbox": "1.0.0-rc48",
-    "@oramacloud/client": "^1.3.11",
+    "@orama/react-components": "^0.0.17",
+    "@oramacloud/client": "^1.3.12",
     "astro": "^4.11.3",
     "astro-embed": "^0.7.2",
     "astro-og-canvas": "^0.5.3",

packages/docs/scripts/postbuild.ts

@@ -57,6 +57,10 @@ async function getAllParsedDocuments() {
 }
 
 async function updateOramaCloud(docs: GeneralPurposeCrawlerResult[]) {
+  if (process.env.ORAMA_CLOUD_INDEX_ID === undefined || process.env.ORAMA_CLOUD_PRIVATE_API_KEY === undefined) {
+    console.warn('ORAMA_CLOUD_INDEX_ID and ORAMA_CLOUD_PRIVATE_API_KEY are not set, skipping Orama Cloud index update.')
+    return
+  }
   const oramaCloudManager = new CloudManager({
     api_key: process.env.ORAMA_CLOUD_PRIVATE_API_KEY,
   })

packages/docs/src/components/Header.astro

@@ -2,10 +2,10 @@
 import type { Props } from '@astrojs/starlight/props'
 
 import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro'
-import { Search } from './Search.jsx'
 import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro'
 import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro'
 import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
+import { Search } from './Search'
 ---
 
 <div class="header flex sm:justify-between justify-start sm:gap-8 gap-2">

packages/docs/src/components/Search.jsx → packages/docs/src/components/Search/Search.jsx

@@ -1,17 +1,13 @@
 import { useEffect, useState } from 'react'
+import { OramaClient } from '@oramacloud/client';
 import { OramaSearchBox, OramaSearchButton } from '@orama/react-components'
+import { ossSuggestions, cloudSuggestions } from './suggestions';
+import { getCurrentCategory, getOramaUserId, searchSessionTracking, userSessionRefresh } from './utils';
 
-const ossSuggestions = [
-  'What languages are supported?',
-  'How do I write an Orama plugin?',
-  'How do I perform vector search with OSS Orama?',
-]
-
-const cloudSuggestions = [
-  'What is an Orama index?',
-  'How do I perform vector search with Orama Cloud?',
-  'What is an answer session?',
-]
+const client = new OramaClient({
+  api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
+  endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
+})  
 
 function useCmdK(callback) {
   const [isCmdKPressed, setIsCmdKPressed] = useState(false)
@@ -48,18 +44,11 @@ function useCmdK(callback) {
 export function Search() {
   const [theme, setTheme] = useState()
   const [currentCategory, setCurrentCategory] = useState(null)
+  const [userId, setUserId] = useState(getOramaUserId());
+
   // TODO: Remove when fully integrated
   const [isOpen, setIsOpen] = useState(false)
 
-  function getCurrentCategory() {
-    const url = new URL(window.location.href).pathname
-
-    if (url.startsWith('/cloud')) return 'Cloud'
-    if (url.startsWith('/open-source')) return 'Open Source'
-
-    return null
-  }
-
   function initSearchBox() {
     try {
       setTheme(document.documentElement.dataset.theme)
@@ -68,9 +57,15 @@ export function Search() {
     }
   }
 
+  useEffect(() => initSearchBox(), [])
+
+  useEffect(() => searchSessionTracking(client, userId), [userId])
+
   useEffect(() => {
-    initSearchBox()
-  }, [])
+    const intervalId = setInterval(() => userSessionRefresh(client, userId, setUserId), 5000)
+    return () => clearInterval(intervalId)
+  }, [userId])
+
 
   useEffect(() => {
     function callback(mutationList) {
@@ -115,13 +110,10 @@ export function Search() {
     <>
       <OramaSearchBox
         id="orama-ui-searchbox"
+        clientInstance={client}
         onSearchboxClosed={() => {
           setIsOpen(false)
         }}
-        index={{
-          api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
-          endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
-        }}
         sourcesMap={{
           description: 'content',
         }}

packages/docs/src/components/Search/index.ts

@@ -0,0 +1,3 @@
+import { Search } from "./Search";
+
+export { Search };

packages/docs/src/components/Search/suggestions.ts

@@ -0,0 +1,11 @@
+export const ossSuggestions = [
+  'What languages are supported?',
+  'How do I write an Orama plugin?',
+  'How do I perform vector search with OSS Orama?',
+]
+
+export const cloudSuggestions = [
+  'What is an Orama index?',
+  'How do I perform vector search with Orama Cloud?',
+  'What is an answer session?',
+]

packages/docs/src/components/Search/utils.ts

@@ -0,0 +1,49 @@
+import type { OramaClient } from "@oramacloud/client"
+
+export function getCurrentCategory() {
+  const url = new URL(window.location.href).pathname
+
+  if (url.startsWith('/cloud')) return 'Cloud'
+  if (url.startsWith('/open-source')) return 'Open Source'
+
+  return null
+}
+
+export function getOramaUserId() {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return
+
+  const cookies = document.cookie.split(';')
+  const oid = cookies.find(cookie => cookie.startsWith('oid='))
+
+  if (oid) {
+    return oid.split('=')[1]
+  }
+
+  return undefined
+}
+
+export function userSessionRefresh(client: OramaClient, userId: string, updateCallback: (userId: string) => void) {
+  const currentUserId = getOramaUserId();
+  if (currentUserId !== userId) {
+    console.log('User ID changed:', currentUserId);
+    client.reset();
+    updateCallback(currentUserId);
+  }
+}
+
+export function searchSessionTracking(client: OramaClient, userId: string) {
+  if (!window?.posthog) return
+  try {
+    if (userId) {
+      // TODO: remove this console.log
+      console.log('Identifying user with Cookie ID:', userId)
+      client.identify(userId);
+    } else {
+      // TODO: remove this console.log
+      console.log('Identifying session with PostHog:', window.posthog.get_distinct_id())
+      client.alias(window.posthog.get_distinct_id());
+    }
+  } catch (error) {
+    console.log(`Error setting identity: ${error}`);
+  }
+}

packages/docs/src/global.d.ts

@@ -0,0 +1,7 @@
+interface Window {
+  posthog: {
+    identify: (userId: string) => void
+    get_distinct_id: () => string
+    capture: (event: string, properties?: any) => void
+  }
+}