Merge pull request #39 from oramasearch/feat/adds-orama-oss-support

feat: adds OSS Orama support
oramasearch · Nov 25, 2024 · 2216a99 · 2216a99
2 parents 65357d8 + 0ea00b1
commit 2216a99
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 166 deletions.
diff --git a/apps/demo-react/package.json b/apps/demo-react/package.json
@@ -13,7 +13,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@orama/react-components": "workspace:*"
+    "@orama/react-components": "workspace:*",
+    "@oramacloud/client": "^2.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@orama/wc-components": "workspace:*",
-    "@oramacloud/client": "1.3.15",
+    "@oramacloud/client": "^2.1.0",
     "@storybook/preview-api": "^8.2.9",
     "@storybook/web-components": "^8.2.3"
   },

diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts
@@ -6,15 +6,15 @@ export type DemoIndexConfig = Record<string, Components.OramaSearchBox>
 const demoIndexes: DemoIndexConfig = {
   orama: {
     open: true,
-    index: {
-      api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
-      endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
-    },
-    // Uncomment this line to use the OramaClient instance and comment the index prop
-    // clientInstance: new OramaClient({
+    // index: {
     //   api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
     //   endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
-    // }),
+    // },
+    // Uncomment this line to use the OramaClient instance and comment the index prop
+    clientInstance: new OramaClient({
+      api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
+      endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
+    }),
     placeholder: 'What do you want to learn about Orama?',
     sourceBaseUrl: 'https://docs.orama.com',
     sourcesMap: {
@@ -28,11 +28,6 @@ const demoIndexes: DemoIndexConfig = {
       description: 'content',
       section: 'category',
     },
-    highlight: {
-      caseSensitive: false,
-      HTMLTag: 'b',
-      CSSClass: 'font-bold',
-    },
   },
   recipes: {
     open: true,

diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -77,9 +77,9 @@ const Template = ({
   facetProperty,
   themeConfig,
   index,
+  clientInstance,
   sourceBaseUrl,
   sourcesMap,
-  highlight,
   resultMap,
 }) => {
   return html`<div>
@@ -93,6 +93,7 @@ const Template = ({
       .colorScheme=${colorScheme}
       .themeConfig=${themeConfig || preset.themeConfig}
       .index=${index || preset.index}
+      .clientInstance=${clientInstance || preset.clientInstance}
       .instance=${preset.instance}
       .suggestions=${suggestions || preset?.suggestions}
       .sourceBaseUrl=${sourceBaseUrl || preset?.sourceBaseUrl}
@@ -119,6 +120,7 @@ const TemplateAsEmbed = ({
   resultMap,
   themeConfig,
   index,
+  clientInstance,
   sourceBaseURL,
   suggestions,
   sourcesMap,
@@ -132,6 +134,7 @@ const TemplateAsEmbed = ({
       .colorScheme=${colorScheme}
       .themeConfig=${themeConfig || preset.themeConfig}
       .index=${index || preset.index}
+      .clientInstance=${clientInstance || preset.clientInstance}
       .instance=${preset.instance}
       .suggestions=${suggestions || preset?.suggestions}
       .sourceBaseUrl=${sourceBaseURL || preset?.sourceBaseUrl}

diff --git a/packages/ui-stencil/package.json b/packages/ui-stencil/package.json
@@ -26,7 +26,8 @@
   "types": "dist/types/index.d.ts",
   "dependencies": {
     "@orama/highlight": "^0.1.6",
-    "@orama/orama": "^2.0.23",
+    "@orama/orama": "^3.0.0",
+    "@orama/switch": "^3.0.0",
     "@oramacloud/client": "^2.1.0",
     "@phosphor-icons/webcomponents": "^2.1.5",
     "@stencil/core": "^4.19.0",

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 { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, 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 { InputProps } from "./components/internal/orama-input/orama-input";
 import { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 import { HighlightOptions } from "@orama/highlight";
 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 { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, 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 { InputProps } from "./components/internal/orama-input/orama-input";
 export { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 export { HighlightOptions } from "@orama/highlight";
 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";
@@ -65,7 +65,7 @@ export namespace Components {
         "chatMarkdownLinkHref"?: ChatMarkdownLinkHref;
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | AnyOrama;
         "index"?: CloudIndexConfig;
         "linksRel"?: string;
         "linksTarget"?: string;
@@ -149,7 +149,7 @@ export namespace Components {
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "chatPlaceholder"?: string;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | AnyOrama;
         "colorScheme"?: ColorScheme;
         "disableChat"?: boolean;
         "facetProperty"?: string;
@@ -623,7 +623,7 @@ declare namespace LocalJSX {
         "chatMarkdownLinkHref"?: ChatMarkdownLinkHref;
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | AnyOrama;
         "index"?: CloudIndexConfig;
         "linksRel"?: string;
         "linksTarget"?: string;
@@ -725,7 +725,7 @@ declare namespace LocalJSX {
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "chatPlaceholder"?: string;
-        "clientInstance"?: OramaClient;
+        "clientInstance"?: OramaClient | AnyOrama;
         "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
@@ -14,6 +14,7 @@ import type {
 } from '@/types'
 import type { OramaClient } from '@oramacloud/client'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
+import type { AnyOrama, Orama } from "@orama/orama"
 
 @Component({
   tag: 'orama-chat-box',
@@ -23,7 +24,7 @@ import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
 export class ChatBox {
   @Element() el: HTMLElement
   @Prop() index?: CloudIndexConfig
-  @Prop() clientInstance?: OramaClient
+  @Prop() clientInstance?: OramaClient | AnyOrama
   @Prop() sourceBaseUrl?: string
   @Prop() linksTarget?: string
   @Prop() linksRel?: string
@@ -36,7 +37,6 @@ export class ChatBox {
   @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref
   @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget
 
-  @State() oramaClient: OramaClient
   @State() componentID = generateRandomID('chat-box')
 
   /**
@@ -66,9 +66,9 @@ 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)
 
-    chatContext.chatService = new ChatService(this.oramaClient)
+    chatContext.chatService = new ChatService(oramaClient)
   }
 
   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
@@ -1,27 +1,25 @@
 # orama-chat-box
 
-
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                 | Attribute         | Description | Type                                                          | Default     |
-| ------------------------ | ----------------- | ----------- | ------------------------------------------------------------- | ----------- |
-| `autoFocus`              | `auto-focus`      |             | `boolean`                                                     | `true`      |
-| `chatMarkdownLinkHref`   | --                |             | `({ text, href }: { text: string; href: string; }) => string` | `undefined` |
-| `chatMarkdownLinkTarget` | --                |             | `({ text, href }: { text: string; href: string; }) => string` | `undefined` |
-| `chatMarkdownLinkTitle`  | --                |             | `({ text, href }: { text: string; href: string; }) => string` | `undefined` |
-| `clientInstance`         | --                |             | `OramaClient<true>`                                           | `undefined` |
-| `index`                  | --                |             | `{ api_key: string; endpoint: string; }`                      | `undefined` |
-| `linksRel`               | `links-rel`       |             | `string`                                                      | `undefined` |
-| `linksTarget`            | `links-target`    |             | `string`                                                      | `undefined` |
-| `placeholder`            | `placeholder`     |             | `string`                                                      | `undefined` |
-| `sourceBaseUrl`          | `source-base-url` |             | `string`                                                      | `undefined` |
-| `sourcesMap`             | --                |             | `{ title?: string; path?: string; description?: string; }`    | `undefined` |
-| `suggestions`            | --                |             | `string[]`                                                    | `undefined` |
-| `systemPrompts`          | --                |             | `string[]`                                                    | `undefined` |
+| Property                 | Attribute         | Description | Type                                                                                                                                                                                             | Default     |
+| ------------------------ | ----------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `autoFocus`              | `auto-focus`      |             | `boolean`                                                                                                                                                                                        | `true`      |
+| `chatMarkdownLinkHref`   | --                |             | `({ text, href }: { text: string; href: string; }) => string`                                                                                                                                    | `undefined` |
+| `chatMarkdownLinkTarget` | --                |             | `({ text, href }: { text: string; href: string; }) => string`                                                                                                                                    | `undefined` |
+| `chatMarkdownLinkTitle`  | --                |             | `({ text, href }: { text: string; href: string; }) => string`                                                                                                                                    | `undefined` |
+| `clientInstance`         | --                |             | `FunctionComponents<any> & Internals<any, AnyIndexStore, AnyDocumentStore, AnySorterStore> & ArrayCallbackComponents<any> & OramaID & { plugins: OramaPlugin<unknown>[]; } \| OramaClient<true>` | `undefined` |
+| `index`                  | --                |             | `{ api_key: string; endpoint: string; }`                                                                                                                                                         | `undefined` |
+| `linksRel`               | `links-rel`       |             | `string`                                                                                                                                                                                         | `undefined` |
+| `linksTarget`            | `links-target`    |             | `string`                                                                                                                                                                                         | `undefined` |
+| `placeholder`            | `placeholder`     |             | `string`                                                                                                                                                                                         | `undefined` |
+| `sourceBaseUrl`          | `source-base-url` |             | `string`                                                                                                                                                                                         | `undefined` |
+| `sourcesMap`             | --                |             | `{ title?: string; path?: string; description?: string; }`                                                                                                                                       | `undefined` |
+| `suggestions`            | --                |             | `string[]`                                                                                                                                                                                       | `undefined` |
+| `systemPrompts`          | --                |             | `string[]`                                                                                                                                                                                       | `undefined` |
 
 
 ## Events

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
@@ -25,6 +25,9 @@ import type {
 } from '@/types'
 import type { TThemeOverrides } from '@/config/theme'
 
+// 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
+
 @Component({
   tag: 'orama-search-box',
   styleUrl: 'orama-search-box.scss',
@@ -36,7 +39,7 @@ export class SearchBox {
   @Prop() themeConfig?: Partial<TThemeOverrides>
   @Prop() colorScheme?: ColorScheme = 'light'
   @Prop() index?: CloudIndexConfig
-  @Prop() clientInstance?: OramaClient
+  @Prop() clientInstance?: OramaClient | AnyOrama
   @Prop({ mutable: true }) open = false
   @Prop() facetProperty?: string
   @Prop() resultMap?: Partial<ResultMap> = {}
@@ -59,7 +62,6 @@ export class SearchBox {
   @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref
   @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget
 
-  @State() oramaClient: OramaClient
   @State() componentID = generateRandomID('search-box')
   @State() systemScheme: Omit<ColorScheme, 'system'> = 'light'
   @State() windowWidth: number
@@ -93,6 +95,7 @@ export class SearchBox {
   schemaQuery: MediaQueryList
 
   @Watch('index')
+  @Watch('clientInstance')
   indexChanged() {
     this.startServices()
   }
@@ -171,10 +174,10 @@ 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)
 
-    searchState.searchService = new SearchService(this.oramaClient)
-    chatContext.chatService = new ChatService(this.oramaClient)
+    searchState.searchService = new SearchService(oramaClient)
+    chatContext.chatService = new ChatService(oramaClient)
   }
 
   componentWillLoad() {