Add support to mutiple result maps (to handle multiple datasources)

apps/demo-angular/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, type Routes } from '@angular/router';
 
 const routes: Routes = [];
 

apps/demo-angular/src/app/app.component.html

@@ -7,6 +7,7 @@ <h1>App Angular</h1>
     <h2>Stencil Components</h2>
     <orama-chat-box
       [clientInstance]="clientInstance"
+      [sourcesMap]="sourcesMap"
     ></orama-chat-box>
   </section>
 </main>

apps/demo-angular/src/app/app.component.ts

@@ -2,17 +2,31 @@ import { Component } from '@angular/core'
 import { CollectionManager } from '@orama/core'
 
 const clientInstance = new CollectionManager({
-    url:'https://oramacore.orama.foo',
-    collectionID: 'cxlenmho72jp3qpbdphbmfdn',
-    readAPIKey: 'caTS1G81uC8uBoWICSQYzmGjGVBCqxrf',
-  })
+  url: 'https://collections.orama.com',
+  collectionID: 'ncd7zwmirytw1o47dogru4bz',
+  readAPIKey: 'df00PbXP0dbRUcJgFeFZSNNb7AhsqCw8',
+})
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'demo-angular'
   clientInstance = clientInstance
+  sourcesMap = [
+    {
+      title: 'name',
+      description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+      path: 'country',
+      datasourceId: 'afvto8jyhbt1we54zait7nmo',
+    },
+    {
+      title: 'Title',
+      description: 'Genre',
+      path: 'Poster',
+      datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+    },
+  ]
 }

apps/demo-nextjs/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@orama/core": "^0.1.3",
+    "@orama/core": "^0.1.8",
     "@orama/react-components": "workspace:*",
     "next": "15.1.4",
     "radix-ui": "^1.1.2",

apps/demo-nextjs/src/app/Orama.tsx

@@ -5,9 +5,9 @@ import { CollectionManager } from '@orama/core'
 import { OramaChatBox, OramaSearchBox, OramaSearchButton } from '@orama/react-components'
 
 const clientInstance = new CollectionManager({
-  url: 'https://oramacore.orama.foo',
-  collectionID: 'cxlenmho72jp3qpbdphbmfdn',
-  readAPIKey: 'caTS1G81uC8uBoWICSQYzmGjGVBCqxrf',
+  url: 'https://collections.orama.com',
+  collectionID: 'ncd7zwmirytw1o47dogru4bz',
+  readAPIKey: 'df00PbXP0dbRUcJgFeFZSNNb7AhsqCw8',
 })
 
 const Orama = () => {
@@ -16,7 +16,37 @@ const Orama = () => {
   return (
     <div>
       <OramaSearchButton style={{ marginBottom: '24px' }} />
-      <OramaSearchBox oramaCoreClientInstance={clientInstance} colorScheme={'light'} />
+      <OramaSearchBox
+        oramaCoreClientInstance={clientInstance}
+        colorScheme={'light'}
+        resultMap={[
+          {
+            title: 'name',
+            description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+            datasourceId: 'afvto8jyhbt1we54zait7nmo',
+          },
+          {
+            title: 'Title',
+            description: 'Genre',
+            path: 'ip_address',
+            datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+          },
+        ]}
+        sourcesMap={[
+          {
+            title: 'name',
+            description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+            path: 'country',
+            datasourceId: 'afvto8jyhbt1we54zait7nmo',
+          },
+          {
+            title: 'Title',
+            description: 'Genre',
+            path: 'Poster',
+            datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+          },
+        ]}
+      />
       <Tabs.Root className="TabsRoot" defaultValue="tab1">
         <Tabs.List className="TabsList" aria-label="Manage your account">
           <Tabs.Trigger className="TabsTrigger" value="tab1">
@@ -35,6 +65,26 @@ const Orama = () => {
             <OramaChatBox
               oramaCoreClientInstance={clientInstance}
               clearChatOnDisconnect={false}
+              sourcesMap={{
+                // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+                title: (item: any, datasourceId) => {
+                  console.log(item)
+                  if (datasourceId === 'afvto8jyhbt1we54zait7nmo') {
+                    return item.name
+                  }
+
+                  return item.Title
+                },
+                // biome-ignore lint/suspicious/noExplicitAny: Indeed uknown data
+                description: (item: any, datasourceId) => {
+                  if (datasourceId === 'afvto8jyhbt1we54zait7nmo') {
+                    return `${item.sex} - ${item.country}`
+                  }
+
+                  return item.Description
+                },
+                path: 'country',
+              }}
               onClearChat={() => setInitialPrompt('')}
               onStartConversation={(e: Event) => console.log('onStartConversation', e)}
               prompt={initialPrompt}

apps/demo-react/package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@orama/core": "^0.1.3",
+    "@orama/core": "^0.1.8",
     "@orama/react-components": "workspace:*",
     "@oramacloud/client": "^2.1.4",
     "react": "^19",

apps/demo-react/src/App.tsx

@@ -3,9 +3,9 @@ import './App.css'
 import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router'
 import { CollectionManager } from '@orama/core'
 
-const ORAMACORE_ENDPOINT = 'https://oramacore.orama.foo'
-const ORAMACORE_COLLECTION_ID = 'cxlenmho72jp3qpbdphbmfdn'
-const ORAMACORE_READ_API_KEY = 'caTS1G81uC8uBoWICSQYzmGjGVBCqxrf'
+const ORAMACORE_ENDPOINT = 'https://collections.orama.com'
+const ORAMACORE_COLLECTION_ID = 'ncd7zwmirytw1o47dogru4bz'
+const ORAMACORE_READ_API_KEY = 'df00PbXP0dbRUcJgFeFZSNNb7AhsqCw8'
 
 // Create a CollectionManager instance
 const collectionManager = new CollectionManager({
@@ -14,7 +14,6 @@ const collectionManager = new CollectionManager({
   readAPIKey: ORAMACORE_READ_API_KEY,
 })
 
-
 function App() {
   return (
     <BrowserRouter>
@@ -44,7 +43,20 @@ const ChatBoxPage = () => {
         <h2 style={{ textAlign: 'center' }}>CHAT BOX</h2>
         <div className="component-row">
           <OramaChatBox
-            sourcesMap={{description: "content"}}
+            sourcesMap={[
+              {
+                title: 'name',
+                description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+                path: 'country',
+                datasourceId: 'afvto8jyhbt1we54zait7nmo',
+              },
+              {
+                title: 'Title',
+                description: 'Genre',
+                path: 'Poster',
+                datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+              },
+            ]}
             oramaCoreClientInstance={collectionManager}
             style={{ height: '600px' }}
             onAnswerSourceClick={(e: Event) => console.log(e)}
@@ -68,9 +80,35 @@ const SearchBoxPage = () => {
       <main>
         <h2 style={{ textAlign: 'center' }}>SEARCH BOX</h2>
         <div className="component-row">
-        <OramaSearchButton colorScheme="system">Search</OramaSearchButton>
+          <OramaSearchButton colorScheme="system">Search</OramaSearchButton>
           <OramaSearchBox
-            resultMap={{description: "content"}}
+            resultMap={[
+              {
+                title: 'name',
+                description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+                datasourceId: 'afvto8jyhbt1we54zait7nmo',
+              },
+              {
+                title: 'Title',
+                description: 'Genre',
+                path: 'ip_address',
+                datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+              },
+            ]}
+            sourcesMap={[
+              {
+                title: 'name',
+                description: (item: { sex: string; country: string }) => `${item.sex} - ${item.country}`,
+                path: 'country',
+                datasourceId: 'afvto8jyhbt1we54zait7nmo',
+              },
+              {
+                title: 'Title',
+                description: 'Genre',
+                path: 'Poster',
+                datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+              },
+            ]}
             onModalClosed={() => {
               console.log('closed')
             }}

apps/demo-vue/src/App.vue

@@ -2,10 +2,25 @@
 import { CollectionManager } from '@orama/core'
 
 const clientInstance = new CollectionManager({
-  url:'https://oramacore.orama.foo',
-  collectionID: 'cxlenmho72jp3qpbdphbmfdn',
-  readAPIKey: 'caTS1G81uC8uBoWICSQYzmGjGVBCqxrf',
+  url: 'https://oramacore.orama.foo',
+  collectionID: 'ncd7zwmirytw1o47dogru4bz',
+  readAPIKey: 'df00PbXP0dbRUcJgFeFZSNNb7AhsqCw8',
 })
+
+const sourcesMap = [
+  {
+    title: 'name',
+    description: (item) => `${item.sex} - ${item.country}`,
+    path: 'country',
+    datasourceId: 'afvto8jyhbt1we54zait7nmo',
+  },
+  {
+    title: 'Title',
+    description: 'Genre',
+    path: 'Poster',
+    datasourceId: 'qn426ptegyc8owv9y0kd3imj',
+  },
+]
 </script>
 <template>
   <main>
@@ -16,7 +31,7 @@ const clientInstance = new CollectionManager({
     <section>
       <h2>Stencil Components</h2>
       <div class="component-row">
-        <orama-chat-box .clientInstance="clientInstance" />
+        <orama-chat-box .clientInstance="clientInstance" :sourcesMap="sourcesMap" />
       </div>
     </section>
   </main>

apps/storybook/.storybook/preview.ts

@@ -1,7 +1,10 @@
 import '@orama/wc-components/dist/orama-ui/orama-ui.css'
 import { html } from 'lit-html'
+import { defineCustomElements } from '@orama/wc-components/loader'
 import { DARK_THEME_BG, LIGTH_THEME_BG } from '../constants'
 
+defineCustomElements()
+
 const preview = {
   decorators: [
     (story, context) => {

apps/storybook/package.json

@@ -11,17 +11,19 @@
     "storybook-test": "storybook build && clear && concurrently -k -s first -n 'Server,Test' -c 'magenta,blue' --hide 'Server' 'http-server ./storybook-static --port 6006 --silent' 'wait-on http-get://127.0.0.1:6006 && test-storybook --no-cache --verbose --'"
   },
   "dependencies": {
+    "@orama/core": "^0.1.8",
+    "@orama/orama": "^3.1.5",
+    "@orama/plugin-secure-proxy": "^3.1.7",
     "@orama/wc-components": "workspace:*",
     "@oramacloud/client": "^2.1.0",
-    "@orama/core": "^0.1.3",
-    "@orama/orama": "^3.1.5",
     "@storybook/preview-api": "^8.2.9",
     "@storybook/web-components": "^8.2.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
     "@open-wc/lit-helpers": "^0.7.0",
     "@stencil/core": "^4.19.0",
+    "@stencil/storybook-plugin": "^0.0.14",
     "@storybook/addon-a11y": "^8.2.3",
     "@storybook/addon-essentials": "^8.2.3",
     "@storybook/blocks": "^8.2.3",
@@ -38,8 +40,8 @@
     "lit-html": "^3.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.2.3",
-    "storybook-addon-stencil": "^0.2.1",
+    "storybook": "^8.6.14",
+    "storybook-addon-stencil": "^0.2.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "wait-on": "^7.0.1"