feat: pass cloud index api key and endpoint via props

oramasearch · Jul 17, 2024 · 227b9fa · 227b9fa
1 parent 9748a3a
commit 227b9fa
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 41 deletions.
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
@@ -18,6 +18,8 @@ const preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
+      expanded: true,
+      sort: 'requiredFirst',
     },
     backgrounds: {
       default: 'light',

diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx
@@ -9,4 +9,11 @@ const meta: Meta<Components.OramaChatBox> = {
 export default meta
 type Story = StoryObj<Components.OramaChatBox>
 
-export const ChatBox: Story = {}
+export const ChatBox: Story = {
+  args: {
+    cloudIndex: {
+      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+    },
+  },
+}
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -8,7 +8,9 @@ const meta: Meta<Components.OramaSearchBox> = {
   argTypes: {
     colorScheme: {
       options: ['light', 'dark', 'system'],
-      defaultValue: 'light',
+      table: {
+        defaultValue: { summary: 'light' },
+      },
       control: { type: 'radio' },
     },
   },
@@ -33,7 +35,6 @@ export const SearchBox: Story = {
     resultMap: {
       description: 'title',
     },
-    colorScheme: 'light',
     themeConfig: {
       colors: {
         light: {
@@ -44,5 +45,9 @@ export const SearchBox: Story = {
         },
       },
     },
+    cloudIndex: {
+      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+    },
   },
 }
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -25,7 +25,9 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer<JSX.Orama
 ]);
 
 
-export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('orama-chat-box', undefined);
+export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('orama-chat-box', undefined, [
+  'cloudIndex'
+]);
 
 
 export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer<JSX.OramaChatMessagesContainer>('orama-chat-messages-container', undefined);
@@ -77,7 +79,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'colorScheme',
   'facetProperty',
   'open',
-  'resultMap'
+  'resultMap',
+  'cloudIndex'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -7,18 +7,18 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ButtonProps } from "./components/internal/orama-button/orama-button";
 import { TChatMessage } from "./context/chatContext";
+import { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection } from "./types/index";
 import { Facet } from "./components/internal/orama-facets/orama-facets";
 import { InputProps } from "./components/internal/orama-input/orama-input";
 import { TThemeOverrides } from "./config/theme";
-import { ResultMap, SearchResult, SearchResultBySection } from "./types/index";
 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 { TChatMessage } from "./context/chatContext";
+export { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection } from "./types/index";
 export { Facet } from "./components/internal/orama-facets/orama-facets";
 export { InputProps } from "./components/internal/orama-input/orama-input";
 export { TThemeOverrides } from "./config/theme";
-export { ResultMap, SearchResult, SearchResultBySection } from "./types/index";
 export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 export { TextProps } from "./components/internal/orama-text/orama-text";
 export namespace Components {
@@ -35,6 +35,7 @@ export namespace Components {
         "message": TChatMessage;
     }
     interface OramaChatBox {
+        "cloudIndex": CloudIndexConfig;
     }
     interface OramaChatMessagesContainer {
     }
@@ -67,6 +68,7 @@ export namespace Components {
     interface OramaSearch {
     }
     interface OramaSearchBox {
+        "cloudIndex": CloudIndexConfig;
         "colorScheme": 'dark' | 'light' | 'system';
         "facetProperty"?: string;
         "open"?: boolean;
@@ -284,6 +286,7 @@ declare namespace LocalJSX {
         "message"?: TChatMessage;
     }
     interface OramaChatBox {
+        "cloudIndex"?: CloudIndexConfig;
     }
     interface OramaChatMessagesContainer {
     }
@@ -317,6 +320,7 @@ declare namespace LocalJSX {
     interface OramaSearch {
     }
     interface OramaSearchBox {
+        "cloudIndex"?: CloudIndexConfig;
         "colorScheme"?: 'dark' | 'light' | 'system';
         "facetProperty"?: string;
         "open"?: boolean;

diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop, h, Element } from '@stencil/core'
-import { AttributeUtils } from '../../../services/AttributeUtils'
+import { getNonExplicitAttributes } from '@/utils/utils'
 
 type BaseProps = {
   /** the optional class name */
@@ -44,7 +44,7 @@ export class OramaButton {
   render() {
     const Tag = this.as
     const declaredProps = ['as', 'class', 'variant']
-    const buttonProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps)
+    const buttonProps = getNonExplicitAttributes(this.el, declaredProps)
 
     const buttonClass = `button button--${this.variant} ${this.class}`
 

diff --git a/...s/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md b/...s/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md
@@ -9,7 +9,7 @@
 
 | Property  | Attribute | Description | Type                                                | Default     |
 | --------- | --------- | ----------- | --------------------------------------------------- | ----------- |
-| `message` | --        |             | `{ role: "assistant" \| "user"; content: string; }` | `undefined` |
+| `message` | --        |             | `{ role: "user" \| "assistant"; content: string; }` | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx b/packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx
@@ -1,7 +1,7 @@
 import { Component, Host, Prop, h, Element, State, Event, type EventEmitter } from '@stencil/core'
 import '@phosphor-icons/webcomponents/PhX'
 import '@phosphor-icons/webcomponents/PhMagnifyingGlass'
-import { AttributeUtils } from '@/services/AttributeUtils'
+import { getNonExplicitAttributes } from '@/utils/utils'
 
 type BaseInputProps = {
   name?: string
@@ -80,7 +80,7 @@ export class Input {
       'default-value',
       'placeholder',
     ]
-    const inputProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps)
+    const inputProps = getNonExplicitAttributes(this.el, declaredProps)
 
     const isSearch = this.type === 'search'
 

diff --git a/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx b/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop, h, State, Element } from '@stencil/core'
-// import { AttributeUtils } from '../../../services/AttributeUtils';
+import { getNonExplicitAttributes } from '@/utils/utils'
 
 export interface TextProps {
   /** it defines the HTML tag to be used */
@@ -33,8 +33,8 @@ export class OramaText implements TextProps {
 
   render() {
     const Tag = this.as
-    // const declaredProps = ['as', 'styled-as', 'class']
-    // const textProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps)
+    const declaredProps = ['as', 'styled-as', 'class']
+    const textProps = getNonExplicitAttributes(this.el, declaredProps)
 
     return (
       <Tag
@@ -43,6 +43,7 @@ export class OramaText implements TextProps {
           [`text-${this.align}`]: !!this.align,
           [this.class]: !!this.class,
         }}
+        {...textProps}
       >
         <slot />
       </Tag>

diff --git a/packages/ui-stencil/src/components/internal/orama-text/readme.md b/packages/ui-stencil/src/components/internal/orama-text/readme.md
@@ -19,13 +19,17 @@
 
  - [orama-chat](../orama-chat)
  - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message)
+ - [orama-chat-box](../../orama-chat-box)
+ - [orama-search-box](../../orama-search-box)
  - [orama-search-results](../orama-search-results)
 
 ### Graph
 ```mermaid
 graph TD;
   orama-chat --> orama-text
   orama-chat-assistent-message --> orama-text
+  orama-chat-box --> orama-text
+  orama-search-box --> orama-text
   orama-search-results --> orama-text
   style orama-text fill:#f9f,stroke:#333,stroke-width:4px
 ```

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,12 +1,36 @@
-import { Component, Host, h } from '@stencil/core'
+import { Component, Host, h, Prop, Watch } from '@stencil/core'
+import { chatContext } from '@/context/chatContext'
+import { ChatService } from '@/services/ChatService'
+import { initOramaClient } from '@/utils/utils'
+import type { CloudIndexConfig } from '@/types'
 
 @Component({
   tag: 'orama-chat-box',
   styleUrl: 'orama-chat-box.scss',
   shadow: true,
 })
 export class ChatBox {
+  @Prop() cloudIndex: CloudIndexConfig
+
+  @Watch('cloudIndex')
+  cloudIndexChanged() {
+    this.startChatService()
+  }
+
+  componentWillLoad() {
+    this.startChatService()
+  }
+
+  startChatService() {
+    const oramaClient = initOramaClient(this.cloudIndex)
+    chatContext.chatService = new ChatService(oramaClient)
+  }
+
   render() {
+    if (!chatContext.chatService) {
+      return <orama-text as="p">Unable to initialize chat service</orama-text>
+    }
+
     return (
       <Host>
         <orama-chat style={{ display: 'flex' }} />

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -5,15 +5,24 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property     | Attribute | Description | Type                                     | Default     |
+| ------------ | --------- | ----------- | ---------------------------------------- | ----------- |
+| `cloudIndex` | --        |             | `{ api_key: string; endpoint: string; }` | `undefined` |
+
+
 ## Dependencies
 
 ### Depends on
 
+- [orama-text](../internal/orama-text)
 - [orama-chat](../internal/orama-chat)
 
 ### Graph
 ```mermaid
 graph TD;
+  orama-chat-box --> orama-text
   orama-chat-box --> orama-chat
   orama-chat --> orama-chat-messages-container
   orama-chat --> orama-chat-suggestions

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
@@ -1,12 +1,13 @@
 import { Component, Host, Prop, Watch, h, Listen, Element, State } from '@stencil/core'
-import { OramaClient } from '@oramacloud/client'
 import { searchState } from '@/context/searchContext'
 import { chatContext } from '@/context/chatContext'
 import { globalContext } from '@/context/GlobalContext'
 import { ChatService } from '@/services/ChatService'
 import { SearchService } from '@/services/SearchService'
 import type { TThemeOverrides } from '@/config/theme'
+import { initOramaClient } from '@/utils/utils'
 import type { ResultMap } from '@/types'
+import type { CloudIndexConfig } from '@/types'
 
 @Component({
   tag: 'orama-search-box',
@@ -21,9 +22,15 @@ export class SearchBox {
   @Prop() facetProperty?: string
   @Prop() open? = false
   @Prop() resultMap?: Partial<ResultMap> = {}
+  @Prop() cloudIndex: CloudIndexConfig
 
   @State() systemScheme: 'light' | 'dark' = 'light'
 
+  @Watch('cloudIndex')
+  cloudIndexChanged() {
+    this.startServices()
+  }
+
   @Watch('themeConfig')
   @Watch('colorScheme')
   watchHandler() {
@@ -89,6 +96,12 @@ export class SearchBox {
     })
   }
 
+  startServices() {
+    const oramaClient = initOramaClient(this.cloudIndex)
+    searchState.searchService = new SearchService(oramaClient)
+    chatContext.chatService = new ChatService(oramaClient)
+  }
+
   componentWillLoad() {
     globalContext.open = this.open
 
@@ -99,24 +112,24 @@ export class SearchBox {
     searchState.facetProperty = this.facetProperty
     searchState.resultMap = this.resultMap
 
-    const oramaClient = new OramaClient({
-      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
-      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
-    })
-
-    searchState.searchService = new SearchService(oramaClient)
-    chatContext.chatService = new ChatService(oramaClient)
-
+    this.startServices()
     this.updateTheme()
     this.detectSystemColorScheme()
   }
 
   render() {
+    if (!searchState.searchService) {
+      return <orama-text as="p">Unable to initialize search service</orama-text>
+    }
+
+    if (!chatContext.chatService) {
+      return <orama-text as="p">Unable to initialize chat service</orama-text>
+    }
+
     return (
       <Host>
         <div class={{ 'orama-container': true, hidden: !globalContext.open }}>
           <orama-navigation-bar />
-          {/* MAIN CONTENT */}
           <div class="main">
             <orama-search style={{ display: globalContext.selectedTab === 'search' ? 'flex' : 'none' }} />
             <orama-chat style={{ display: globalContext.selectedTab === 'chat' ? 'flex' : 'none' }} />

diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md
@@ -7,6 +7,7 @@
 
 | Property        | Attribute        | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
 | --------------- | ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `cloudIndex`    | --               |             | `{ api_key: string; endpoint: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
 | `colorScheme`   | `color-scheme`   |             | `"dark" \| "light" \| "system"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'light'`   |
 | `facetProperty` | `facet-property` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
 | `open`          | `open`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
@@ -18,13 +19,15 @@
 
 ### Depends on
 
+- [orama-text](../internal/orama-text)
 - [orama-navigation-bar](../internal/orama-navigation-bar)
 - [orama-search](../internal/orama-search)
 - [orama-chat](../internal/orama-chat)
 
 ### Graph
 ```mermaid
 graph TD;
+  orama-search-box --> orama-text
   orama-search-box --> orama-navigation-bar
   orama-search-box --> orama-search
   orama-search-box --> orama-chat