chore: refactore oramaInstance and handle facet click

oramasearch · Jul 12, 2024 · 7c83d87 · 7c83d87
1 parent 46bd62b
commit 7c83d87
Show file tree

Hide file tree

Showing 16 changed files with 98 additions and 98 deletions.
diff --git a/.../storybook/stories/typography.stories.tsx → .../storybook/stories/orama-text.stories.tsx b/.../storybook/stories/typography.stories.tsx → .../storybook/stories/orama-text.stories.tsx
diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
@@ -3,16 +3,30 @@ import type { StoryObj, Meta } from '@storybook/html'
 const meta: Meta = {
   title: 'Public/SearchBox',
   component: 'search-box',
+
+  argTypes: {
+    facetProperty: {
+      control: { type: 'text' },
+    },
+  },
 } satisfies Meta
 
 export default meta
 type Story = StoryObj
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+const Template = (args) => {
+  return `
+    <search-box open="true" facet-property=${args.facetProperty}></search-box>
+  `
+}
+
 export const SearchBox: Story = {
-  render: () => `
-    <search-box open="true"></search-box>
-  `,
+  render: Template,
+  args: {
+    class: 'my-optional-class',
+    facetProperty: 'category',
+  },
 }
 
 export const SearchBoxWithToggler: Story = {

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -33,9 +33,7 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
 
 
 export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
-  'facets',
-  'currentFacet',
-  'facetSelected'
+  'facets'
 ]);
 
 
@@ -86,6 +84,7 @@ export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('ora
 export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [
   'themeConfig',
   'color',
+  'facetProperty',
   'open'
 ]);
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -33,7 +33,6 @@ export namespace Components {
         "message": TChatMessage;
     }
     interface OramaFacets {
-        "currentFacet": string;
         "facets": any[];
     }
     interface OramaInput {
@@ -81,16 +80,13 @@ export namespace Components {
     }
     interface SearchBox {
         "color": 'dark' | 'light' | 'system';
+        "facetProperty": string;
         "open": false;
         "themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }
     interface SearchBoxToggler {
     }
 }
-export interface OramaFacetsCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLOramaFacetsElement;
-}
 export interface OramaInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLOramaInputElement;
@@ -130,18 +126,7 @@ declare global {
         prototype: HTMLOramaChatUserMessageElement;
         new (): HTMLOramaChatUserMessageElement;
     };
-    interface HTMLOramaFacetsElementEventMap {
-        "facetSelected": string;
-    }
     interface HTMLOramaFacetsElement extends Components.OramaFacets, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLOramaFacetsElementEventMap>(type: K, listener: (this: HTMLOramaFacetsElement, ev: OramaFacetsCustomEvent<HTMLOramaFacetsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLOramaFacetsElementEventMap>(type: K, listener: (this: HTMLOramaFacetsElement, ev: OramaFacetsCustomEvent<HTMLOramaFacetsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLOramaFacetsElement: {
         prototype: HTMLOramaFacetsElement;
@@ -252,9 +237,7 @@ declare namespace LocalJSX {
         "message"?: TChatMessage;
     }
     interface OramaFacets {
-        "currentFacet"?: string;
         "facets"?: any[];
-        "onFacetSelected"?: (event: OramaFacetsCustomEvent<string>) => void;
     }
     interface OramaInput {
         "defaultValue"?: InputProps['defaultValue'];
@@ -303,6 +286,7 @@ declare namespace LocalJSX {
     }
     interface SearchBox {
         "color"?: 'dark' | 'light' | 'system';
+        "facetProperty"?: string;
         "open"?: false;
         "themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }

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: "user" \| "assistant"; content: string; }` | `undefined` |
+| `message` | --        |             | `{ role: "assistant" \| "user"; content: string; }` | `undefined` |
 
 
 ## Dependencies

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

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx
@@ -1,6 +1,5 @@
 import { Component, Host, State, h } from '@stencil/core'
-import { OramaClient } from '@oramacloud/client'
-import { ChatService } from '@/services/ChatService'
+import { chatContext } from '@/context/chatContext'
 
 @Component({
   tag: 'orama-chat',
@@ -9,27 +8,14 @@ import { ChatService } from '@/services/ChatService'
 export class OramaChat {
   @State() inputValue = ''
 
-  private chatService: ChatService
-
-  // TODO: We probably want to use this oramaClient both in chat and search. We may want to uplift orama client to be a singleton
-  componentWillLoad() {
-    // TODO: Should not be hardcoded
-    const oramaClient = new OramaClient({
-      api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
-      endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
-    })
-
-    this.chatService = new ChatService(oramaClient)
-  }
-
   handleSubmit = (e: Event) => {
     e.preventDefault()
 
-    if (!this.chatService) {
+    if (chatContext.chatService === null) {
       throw new Error('Chat Service is not initialized')
     }
 
-    this.chatService.sendQuestion(this.inputValue)
+    chatContext.chatService.sendQuestion(this.inputValue)
     this.inputValue = ''
   }
 

diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx
@@ -1,5 +1,5 @@
-import { Component, h, Prop, Event, type EventEmitter } from '@stencil/core'
-// import { searchState } from '@/context/searchContext'
+import { Component, h, Prop, State } from '@stencil/core'
+import { searchState } from '@/context/searchContext'
 
 @Component({
   tag: 'orama-facets',
@@ -11,11 +11,12 @@ import { Component, h, Prop, Event, type EventEmitter } from '@stencil/core'
  */
 export class OramaFacets {
   @Prop() facets: any[] // TODO: fix type
-  @Prop() currentFacet: string
-  @Event() facetSelected: EventEmitter<string>
 
-  handleClick(facet: string) {
-    this.facetSelected.emit(facet)
+  @State() selected: string
+
+  handleClick(facet: { name: string; count: number }) {
+    this.selected = facet.name
+    searchState.currentFacet = facet
   }
 
   render() {
@@ -25,7 +26,7 @@ export class OramaFacets {
 
     return (
       <ul class="facets-list">
-        {this.facets?.map((facet, key) => {
+        {this.facets?.map((facet) => {
           if (facet?.count === 0) {
             return
           }
@@ -35,7 +36,7 @@ export class OramaFacets {
                 type="button"
                 class={{
                   'facet-button': true,
-                  'facet-button--selected': facet === this.currentFacet || (!this.currentFacet && key === 0),
+                  'facet-button--selected': this.selected === facet?.name || (!this.selected && facet?.name === 'All'),
                 }}
                 onClick={() => this.handleClick(facet)}
               >

diff --git a/packages/ui-stencil/src/components/internal/orama-facets/readme.md b/packages/ui-stencil/src/components/internal/orama-facets/readme.md
@@ -7,17 +7,9 @@
 
 ## Properties
 
-| Property       | Attribute       | Description | Type     | Default     |
-| -------------- | --------------- | ----------- | -------- | ----------- |
-| `currentFacet` | `current-facet` |             | `string` | `undefined` |
-| `facets`       | --              |             | `any[]`  | `undefined` |
-
-
-## Events
-
-| Event           | Description | Type                  |
-| --------------- | ----------- | --------------------- |
-| `facetSelected` |             | `CustomEvent<string>` |
+| Property | Attribute | Description | Type    | Default     |
+| -------- | --------- | ----------- | ------- | ----------- |
+| `facets` | --        |             | `any[]` | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss
@@ -12,7 +12,6 @@
   background: var(--background-color-secondary, background-color('secondary'));
   border-radius: var(--radius-m, $radius-m);
   color: var(--text-color-primary, text-color('primary'));
-  padding: var(--radius-s, $radius-s) var(--radius-m, $radius-m);
   width: 100%;
 
   &::placeholder {
@@ -43,7 +42,7 @@
 }
 
 .input--small {
-  padding: var(--spacing-xs, $spacing-xs) var(--spacing-S, $spacing-s);
+  padding: var(--spacing-xs, $spacing-xs) var(--spacing-s, $spacing-s);
 }
 
 .input--medium {

diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx
@@ -1,6 +1,4 @@
-import { OramaClient } from '@oramacloud/client'
 import { Component, Host, State, Watch, h } from '@stencil/core'
-import { SearchService } from '@/services/SearchService'
 import { searchState, searchStore } from '@/context/searchContext'
 import type { SearchResultsProps } from '@/components/internal/orama-search-results/orama-search-results'
 
@@ -9,28 +7,13 @@ import type { SearchResultsProps } from '@/components/internal/orama-search-resu
   styleUrl: 'orama-search.scss',
 })
 export class OramaSearch {
-  private searchService!: SearchService
-
   @State() searchValue = ''
   @State() searchResults: SearchResultsProps['items'] = []
   @State() facets = []
 
-  // TODO: We probably want to use this oramaClient both in chat and search. We may want to uplift orama client to be a singleton
-  componentWillLoad() {
-    // TODO: Should not be hardcoded
-    const oramaClient = new OramaClient({
-      // api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
-      // endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
-      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
-      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
-    })
-
-    this.searchService = new SearchService(oramaClient)
-  }
-
   @Watch('searchValue')
   handleSearchValueChange(newValue: string) {
-    this.searchService.search(newValue)
+    searchState.searchService.search(newValue)
 
     // TODO: should be moved to service
     searchStore.onChange('hits', (hits) => {
@@ -41,14 +24,14 @@ export class OramaSearch {
         path: hit.document.path,
       }))
     })
+
     // TODO: category should be dynamic and taken from resultsMap
     searchStore.onChange('facets', (facets) => {
-      if (!facets?.category?.values) {
+      if (!searchState.facetProperty && !facets[searchState.facetProperty]?.values) {
         return
       }
-      console.log('***facets', facets)
-      const totalCount = Object.values(facets.category.values).reduce((acc, count) => acc + count, 0)
-      const allFacets = Object.keys(facets?.category?.values)?.map((key) => {
+      const totalCount = Object.values(facets[searchState.facetProperty]?.values).reduce((acc, count) => acc + count, 0)
+      const allFacets = Object.keys(facets[searchState.facetProperty]?.values).map((key) => {
         return {
           name: key,
           count: facets.category.values[key],
@@ -76,6 +59,7 @@ export class OramaSearch {
           autofocus
           type="search"
           onInput={this.onSearch.bind(this)}
+          size="large"
           labelForScreenReaders="Search..."
           placeholder="Search..."
         />

diff --git a/packages/ui-stencil/src/components/search-box/readme.md b/packages/ui-stencil/src/components/search-box/readme.md
@@ -5,11 +5,12 @@
 
 ## Properties
 
-| Property      | Attribute | Description | Type                                                                                  | Default     |
-| ------------- | --------- | ----------- | ------------------------------------------------------------------------------------- | ----------- |
-| `color`       | `color`   |             | `"dark" \| "light" \| "system"`                                                       | `undefined` |
-| `open`        | `open`    |             | `boolean`                                                                             | `undefined` |
-| `themeConfig` | --        |             | `{ colors: { light: { primaryColor: string; }; dark: { primaryColor: string; }; }; }` | `undefined` |
+| Property        | Attribute        | Description | Type                                                                                  | Default     |
+| --------------- | ---------------- | ----------- | ------------------------------------------------------------------------------------- | ----------- |
+| `color`         | `color`          |             | `"dark" \| "light" \| "system"`                                                       | `undefined` |
+| `facetProperty` | `facet-property` |             | `string`                                                                              | `undefined` |
+| `open`          | `open`           |             | `boolean`                                                                             | `undefined` |
+| `themeConfig`   | --               |             | `{ colors: { light: { primaryColor: string; }; dark: { primaryColor: string; }; }; }` | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -1,6 +1,10 @@
 import { Component, Host, Prop, Watch, h, Listen } from '@stencil/core'
+import { OramaClient } from '@oramacloud/client'
 import { searchState } from '@/context/searchContext'
+import { chatContext } from '@/context/chatContext'
 import { globalContext } from '@/context/searchBoxContext'
+import { ChatService } from '@/services/ChatService'
+import { SearchService } from '@/services/SearchService'
 
 @Component({
   tag: 'search-box',
@@ -10,13 +14,19 @@ import { globalContext } from '@/context/searchBoxContext'
 export class SearchBox {
   @Prop() themeConfig: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } }
   @Prop() color: 'dark' | 'light' | 'system'
+  @Prop() facetProperty: string
   @Prop() open: false
 
   @Watch('open')
   handleOpenChange(newValue: boolean) {
     searchState.open = newValue
   }
 
+  @Watch('facetProperty')
+  handleFacetPropertyChange(newValue: string) {
+    searchState.facetProperty = newValue
+  }
+
   @Listen('oramaItemClick')
   handleItemClick(event: CustomEvent) {
     // TODO: manage item click
@@ -25,6 +35,15 @@ export class SearchBox {
 
   componentWillLoad() {
     searchState.open = this.open
+    searchState.facetProperty = this.facetProperty
+
+    const oramaClient = new OramaClient({
+      api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
+      endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
+    })
+
+    searchState.searchService = new SearchService(oramaClient)
+    chatContext.chatService = new ChatService(oramaClient)
   }
 
   render() {

diff --git a/packages/ui-stencil/src/context/chatContext.ts b/packages/ui-stencil/src/context/chatContext.ts
@@ -1,3 +1,4 @@
+import type { ChatService } from '@/services/ChatService'
 import { createStore } from '@stencil/store'
 
 // TODO: Seems like there is no message type being exported from orama-client rn
@@ -17,7 +18,8 @@ const { state: chatContext } = createStore({
   messages: [] as TChatMessage[],
   isLoading: false,
   // TODO: Evaluate if we need to have a error object/string instead of just a boolean
-  error: false
+  error: false,
+  chatService: null as ChatService | null,
 })
 
 export { chatContext }