Merge pull request #78 from oramasearch/feature/orm-2152

Feature/orm 2152 - UI-components: supporting multi-index search
oramasearch · Jan 27, 2025 · eeae2f0 · eeae2f0
2 parents 34ef1ac + a7e6b88
commit eeae2f0
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 35 deletions.
diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts
@@ -75,4 +75,24 @@ demoIndexes.oramaWithCustomIcons = {
   },
 }
 
+demoIndexes.multipleIndexes = {
+  open: true,
+  resultMap: {
+    description: (doc) => {
+      return doc.description || doc.content
+    },
+    section: (doc) => {
+      return doc.genres?.[0] || doc.section
+    },
+  },
+  index: [
+    {
+      api_key: 'hdRgZI3j8Z38pImkqYWbAw7SwnrJk8Nt',
+      endpoint: 'https://cloud.orama.run/v1/indexes/videogames-nb9lk0',
+    },
+    { api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J', endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd' },
+  ],
+  suggestions: ['How to get started?'],
+}
+
 export default demoIndexes
diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -66,7 +66,7 @@ export namespace Components {
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "clientInstance"?: OramaClient | AnyOrama;
-        "index"?: CloudIndexConfig;
+        "index"?: CloudIndexConfig | CloudIndexConfig[];
         "linksRel"?: string;
         "linksTarget"?: string;
         "placeholder"?: string;
@@ -188,7 +188,7 @@ export namespace Components {
         /**
           * Orama Index configuration  note: It will be overrided by clientInstance property
          */
-        "index"?: CloudIndexConfig;
+        "index"?: CloudIndexConfig | CloudIndexConfig[];
         /**
           * This component can behave either as Modal or a Embed component. For Modal, a new absolute panel will be displayed on top. For Embed, Orama Search Box will be displayed as a inline component.
          */
@@ -694,7 +694,7 @@ declare namespace LocalJSX {
         "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "clientInstance"?: OramaClient | AnyOrama;
-        "index"?: CloudIndexConfig;
+        "index"?: CloudIndexConfig | CloudIndexConfig[];
         "linksRel"?: string;
         "linksTarget"?: string;
         /**
@@ -834,7 +834,7 @@ declare namespace LocalJSX {
         /**
           * Orama Index configuration  note: It will be overrided by clientInstance property
          */
-        "index"?: CloudIndexConfig;
+        "index"?: CloudIndexConfig | CloudIndexConfig[];
         /**
           * This component can behave either as Modal or a Embed component. For Modal, a new absolute panel will be displayed on top. For Embed, Orama Search Box will be displayed as a inline component.
          */

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
@@ -1,7 +1,11 @@
 import { Component, Host, h, Prop, Watch, State, Element, type EventEmitter, Event } from '@stencil/core'
 import { chatContext } from '@/context/chatContext'
 import { ChatService } from '@/services/ChatService'
-import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/utils/utils'
+import {
+  generateRandomID,
+  initOramaClient,
+  validateCloudIndexConfig as validateCloudIndexOrInstance,
+} from '@/utils/utils'
 import type {
   ChatMarkdownLinkHref,
   ChatMarkdownLinkTarget,
@@ -14,7 +18,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"
+import type { AnyOrama, Orama } from '@orama/orama'
 
 @Component({
   tag: 'orama-chat-box',
@@ -23,7 +27,7 @@ import type { AnyOrama, Orama } from "@orama/orama"
 })
 export class ChatBox {
   @Element() el: HTMLElement
-  @Prop() index?: CloudIndexConfig
+  @Prop() index?: CloudIndexConfig | CloudIndexConfig[]
   @Prop() clientInstance?: OramaClient | AnyOrama
   @Prop() sourceBaseUrl?: string
   @Prop() linksTarget?: string
@@ -65,7 +69,7 @@ export class ChatBox {
   }
 
   startChatService() {
-    validateCloudIndexConfig(this.el, this.index, this.clientInstance)
+    validateCloudIndexOrInstance(this.el, this.index, this.clientInstance)
     const oramaClient = this.clientInstance || initOramaClient(this.index)
 
     chatContext.chatService = new ChatService(oramaClient)

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -12,7 +12,7 @@
 | `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` |
+| `index`                  | --                |             | `CloudIndexConfig[] \| { api_key: string; endpoint: string; }`                                                                                                                                   | `undefined` |
 | `linksRel`               | `links-rel`       |             | `string`                                                                                                                                                                                         | `undefined` |
 | `linksTarget`            | `links-target`    |             | `string`                                                                                                                                                                                         | `undefined` |
 | `placeholder`            | `placeholder`     |             | `string`                                                                                                                                                                                         | `undefined` |

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
@@ -50,7 +50,7 @@ export class SearchBox {
    *
    * note: It will be overrided by clientInstance property
    */
-  @Prop() index?: CloudIndexConfig
+  @Prop() index?: CloudIndexConfig | CloudIndexConfig[]
   /**
    * Orama Instance
    */