accept OSS as Client Index on external components

oramasearch · Oct 7, 2024 · 7a3674d · 7a3674d
1 parent fbcbaad
commit 7a3674d
Show file tree

Hide file tree

Showing 9 changed files with 459 additions and 213 deletions.
diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -9,23 +9,23 @@ import { ButtonProps } from "./components/internal/orama-button/orama-button";
 import { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
 import { TChatInteraction } from "./context/chatContext";
 import { OramaClient } from "@oramacloud/client";
+import { AnyOrama, Orama, SearchParams } from "@orama/orama";
 import { Facet } from "./components/internal/orama-facets/orama-facets";
 import { InputProps } from "./components/internal/orama-input/orama-input";
 import { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 import { TThemeOverrides } from "./config/theme";
-import { AnyOrama, Orama, SearchParams } from "@orama/orama";
 import { TThemeOverrides as TThemeOverrides1 } from "./components.d";
 import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 import { TextProps } from "./components/internal/orama-text/orama-text";
 export { ButtonProps } from "./components/internal/orama-button/orama-button";
 export { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
 export { TChatInteraction } from "./context/chatContext";
 export { OramaClient } from "@oramacloud/client";
+export { AnyOrama, Orama, SearchParams } from "@orama/orama";
 export { Facet } from "./components/internal/orama-facets/orama-facets";
 export { InputProps } from "./components/internal/orama-input/orama-input";
 export { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 export { TThemeOverrides } from "./config/theme";
-export { AnyOrama, Orama, SearchParams } from "@orama/orama";
 export { TThemeOverrides as TThemeOverrides1 } from "./components.d";
 export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 export { TextProps } from "./components/internal/orama-text/orama-text";
@@ -52,7 +52,7 @@ export namespace Components {
         "interaction": TChatInteraction;
     }
     interface OramaChatBox {
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | Orama<unknown>;
         "index"?: CloudIndexConfig;
         "placeholder"?: string;
         "sourceBaseUrl"?: string;
@@ -123,7 +123,7 @@ export namespace Components {
     }
     interface OramaSearchBox {
         "chatPlaceholder"?: string;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | Orama<unknown>;
         "colorScheme"?: ColorScheme;
         "disableChat"?: boolean;
         "facetProperty"?: string;
@@ -465,7 +465,7 @@ declare namespace LocalJSX {
         "interaction"?: TChatInteraction;
     }
     interface OramaChatBox {
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | Orama<unknown>;
         "index"?: CloudIndexConfig;
         "placeholder"?: string;
         "sourceBaseUrl"?: string;
@@ -538,7 +538,7 @@ declare namespace LocalJSX {
     }
     interface OramaSearchBox {
         "chatPlaceholder"?: string;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | Orama<unknown>;
         "colorScheme"?: ColorScheme;
         "disableChat"?: boolean;
         "facetProperty"?: string;

diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
@@ -5,6 +5,8 @@ import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/u
 import type { CloudIndexConfig, SourcesMap } from '@/types'
 import type { OramaClient } from '@oramacloud/client'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
+import type { Orama } from '@orama/orama'
+import { Switch } from '@orama/switch'
 
 @Component({
   tag: 'orama-chat-box',
@@ -14,13 +16,12 @@ import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
 export class ChatBox {
   @Element() el: HTMLElement
   @Prop() index?: CloudIndexConfig
-  @Prop() clientInstance?: OramaClient
+  @Prop() clientInstance?: OramaClient | Orama<unknown>
   @Prop() sourceBaseUrl?: string
   @Prop() placeholder?: string
   @Prop() sourcesMap?: SourcesMap
   @Prop() suggestions?: string[]
 
-  @State() oramaClient: OramaClient
   @State() componentID = generateRandomID('chat-box')
 
   @Watch('index')
@@ -35,9 +36,10 @@ export class ChatBox {
 
   startChatService() {
     validateCloudIndexConfig(this.el, this.index, this.clientInstance)
-    this.oramaClient = this.clientInstance || initOramaClient(this.index)
+    const oramaClient = this.clientInstance || initOramaClient(this.index)
+    const switchInstance = new Switch(oramaClient)
 
-    chatContext.chatService = new ChatService(this.oramaClient)
+    chatContext.chatService = new ChatService(switchInstance)
   }
 
   render() {

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property         | Attribute         | Description | Type                                                       | Default     |
-| ---------------- | ----------------- | ----------- | ---------------------------------------------------------- | ----------- |
-| `clientInstance` | --                |             | `OramaClient`                                              | `undefined` |
-| `index`          | --                |             | `{ api_key: string; endpoint: string; }`                   | `undefined` |
-| `placeholder`    | `placeholder`     |             | `string`                                                   | `undefined` |
-| `sourceBaseUrl`  | `source-base-url` |             | `string`                                                   | `undefined` |
-| `sourcesMap`     | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined` |
-| `suggestions`    | --                |             | `string[]`                                                 | `undefined` |
+| Property         | Attribute         | Description | Type                                                                                                                                                                             | Default     |
+| ---------------- | ----------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `clientInstance` | --                |             | `FunctionComponents<unknown> & Internals<unknown, Index, DocumentsStore, Sorter> & ArrayCallbackComponents<any> & OramaID & { plugins: OramaPlugin<unknown>[]; } \| OramaClient` | `undefined` |
+| `index`          | --                |             | `{ api_key: string; endpoint: string; }`                                                                                                                                         | `undefined` |
+| `placeholder`    | `placeholder`     |             | `string`                                                                                                                                                                         | `undefined` |
+| `sourceBaseUrl`  | `source-base-url` |             | `string`                                                                                                                                                                         | `undefined` |
+| `sourcesMap`     | --                |             | `{ title?: string; path?: string; description?: string; }`                                                                                                                       | `undefined` |
+| `suggestions`    | --                |             | `string[]`                                                                                                                                                                       | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
@@ -11,6 +11,7 @@ import type { TThemeOverrides } from '@/config/theme'
 import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/utils/utils'
 import type { ColorScheme, ResultMap, SourcesMap } from '@/types'
 import type { CloudIndexConfig } from '@/types'
+import { Switch } from '@orama/switch'
 
 // TODO: AI components should be lazyly loaded. In case of Disable AI flag, it should not be loaded at all
 // https://linear.app/oramasearch/issue/ORM-1824/ai-components-should-be-lazyly-loaded-in-case-of-disable-ai-flag-they
@@ -26,7 +27,7 @@ export class SearchBox {
   @Prop() themeConfig?: Partial<TThemeOverrides>
   @Prop() colorScheme?: ColorScheme = 'light'
   @Prop() index?: CloudIndexConfig
-  @Prop() clientInstance?: OramaClient
+  @Prop() clientInstance?: OramaClient | Orama<unknown>
   @Prop({ mutable: true }) open = false
   @Prop() facetProperty?: string
   @Prop() resultMap?: Partial<ResultMap> = {}
@@ -42,7 +43,6 @@ export class SearchBox {
   @Prop() suggestions?: string[]
   @Prop() searchParams?: SearchParams<Orama<AnyOrama | OramaClient>>
 
-  @State() oramaClient: OramaClient
   @State() componentID = generateRandomID('search-box')
   @State() systemScheme: Omit<ColorScheme, 'system'> = 'light'
   @State() windowWidth: number
@@ -141,10 +141,11 @@ export class SearchBox {
 
   startServices() {
     validateCloudIndexConfig(this.htmlElement, this.index, this.clientInstance)
-    this.oramaClient = this.clientInstance ? this.clientInstance : initOramaClient(this.index)
+    const oramaClient = this.clientInstance ? this.clientInstance : initOramaClient(this.index)
+    const switchInstance = new Switch(oramaClient)
 
-    searchState.searchService = new SearchService(this.oramaClient)
-    chatContext.chatService = new ChatService(this.oramaClient)
+    searchState.searchService = new SearchService(switchInstance)
+    chatContext.chatService = new ChatService(switchInstance)
   }
 
   componentWillLoad() {