diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
index 99e6efe1..80b24bb3 100644
--- a/apps/storybook/stories/search-box.stories.tsx
+++ b/apps/storybook/stories/search-box.stories.tsx
@@ -16,25 +16,18 @@ type Story = StoryObj
// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
const Template = (args) => {
+ // TODO: We need to find a away to pass complex objects here so we can manipulate the args with the storybook controls
return `
-
- `
+
+
+
+
`
}
export const SearchBox: Story = {
render: Template,
args: {
- class: 'my-optional-class',
facetProperty: 'category',
+ open: true,
},
}
-
-export const SearchBoxWithToggler: Story = {
- render: () => `
- `,
-}
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
index cf07f18a..ff935ab6 100644
--- a/packages/ui-stencil-vue/lib/components.ts
+++ b/packages/ui-stencil-vue/lib/components.ts
@@ -33,7 +33,9 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer('orama-facets', undefined, [
- 'facets'
+ 'facets',
+ 'facetClick',
+ 'selectedFacet'
]);
@@ -53,7 +55,7 @@ export const OramaSearch = /*@__PURE__*/ defineContainer('orama
export const OramaSearchResults = /*@__PURE__*/ defineContainer('orama-search-results', undefined, [
- 'items',
+ 'sections',
'searchTerm',
'oramaItemClick'
]);
@@ -85,7 +87,8 @@ export const SearchBox = /*@__PURE__*/ defineContainer('search-bo
'themeConfig',
'color',
'facetProperty',
- 'open'
+ 'open',
+ 'resultMap'
]);
diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
index d0bb7245..87cd4fa3 100644
--- a/packages/ui-stencil/src/components.d.ts
+++ b/packages/ui-stencil/src/components.d.ts
@@ -7,13 +7,17 @@
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { ButtonProps } from "./components/internal/orama-button/orama-button";
import { TChatMessage } from "./context/chatContext";
+import { Facet } from "./components/internal/orama-facets/orama-facets";
import { InputProps } from "./components/internal/orama-input/orama-input";
-import { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+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 { Facet } from "./components/internal/orama-facets/orama-facets";
export { InputProps } from "./components/internal/orama-input/orama-input";
-export { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+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 {
interface OramaButton {
@@ -33,7 +37,9 @@ export namespace Components {
"message": TChatMessage;
}
interface OramaFacets {
- "facets": any[];
+ "facetClick": (facetName: string) => void;
+ "facets": Facet[];
+ "selectedFacet": string;
}
interface OramaInput {
"defaultValue": InputProps['defaultValue'];
@@ -47,8 +53,8 @@ export namespace Components {
interface OramaSearch {
}
interface OramaSearchResults {
- "items": SearchResultsProps['items'];
"searchTerm": SearchResultsProps['searchTerm'];
+ "sections": SearchResultBySection[];
}
interface OramaText {
/**
@@ -81,7 +87,8 @@ export namespace Components {
interface SearchBox {
"color": 'dark' | 'light' | 'system';
"facetProperty": string;
- "open": false;
+ "open": boolean;
+ "resultMap": Partial;
"themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
}
interface SearchBoxToggler {
@@ -156,7 +163,7 @@ declare global {
new (): HTMLOramaSearchElement;
};
interface HTMLOramaSearchResultsElementEventMap {
- "oramaItemClick": SearchItem;
+ "oramaItemClick": SearchResult;
}
interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
@@ -237,7 +244,9 @@ declare namespace LocalJSX {
"message"?: TChatMessage;
}
interface OramaFacets {
- "facets"?: any[];
+ "facetClick"?: (facetName: string) => void;
+ "facets"?: Facet[];
+ "selectedFacet"?: string;
}
interface OramaInput {
"defaultValue"?: InputProps['defaultValue'];
@@ -252,9 +261,9 @@ declare namespace LocalJSX {
interface OramaSearch {
}
interface OramaSearchResults {
- "items"?: SearchResultsProps['items'];
- "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent) => void;
+ "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent) => void;
"searchTerm"?: SearchResultsProps['searchTerm'];
+ "sections"?: SearchResultBySection[];
}
interface OramaText {
/**
@@ -287,7 +296,8 @@ declare namespace LocalJSX {
interface SearchBox {
"color"?: 'dark' | 'light' | 'system';
"facetProperty"?: string;
- "open"?: false;
+ "open"?: boolean;
+ "resultMap"?: Partial;
"themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
}
interface SearchBoxToggler {
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
index 2208c4da..3a279141 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -23,6 +23,10 @@ orama-chat-assistent-message {
.sources-wrapper {
display: flex;
+
+ // TODO: Remove None display when the time comes
+ display: none;
+
margin-top: var(--spacing-s, $spacing-s);
padding: 0 var(--spacing-l, $spacing-l);
gap: var(--spacing-s, $spacing-s);
diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss
index ddcd669b..6459c051 100644
--- a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss
+++ b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss
@@ -2,11 +2,27 @@
display: flex;
align-items: center;
column-gap: var(--spacing-s, $spacing-s);
- margin: var(--spacing-l, $spacing-l) 0;
+
list-style: none;
- padding: 0;
- // todo: check scroll styles
- overflow: scroll;
+ padding: var(--radius-l, $spacing-l);
+
+ margin: 0;
+
+ // TODO: check scroll styles
+ // Maybe move somewhere else to reuse in some somponents, but not globally
+ &::-webkit-scrollbar {
+ height: 0.3em;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ // TODO: Should it be a variable?
+ background-color: #b2b2b285;
+ border-radius: var(--border-radius-l, $radius-l);
+ }
+
+ overflow-x: auto;
}
.facet-button {
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
index e3ce4439..14a8509f 100644
--- 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,7 @@
-import { Component, h, Prop, State } from '@stencil/core'
-import { searchState } from '@/context/searchContext'
+import { Component, h, Prop } from '@stencil/core'
+
+// TODO: fix type
+export type Facet = { name: string; count: number }
@Component({
tag: 'orama-facets',
@@ -10,13 +12,12 @@ import { searchState } from '@/context/searchContext'
* The orama-facets component renders a list of facets
*/
export class OramaFacets {
- @Prop() facets: any[] // TODO: fix type
-
- @State() selected: string
+ @Prop() facets: Facet[]
+ @Prop() facetClick: (facetName: string) => void
+ @Prop() selectedFacet: string
- handleClick(facet: { name: string; count: number }) {
- this.selected = facet.name
- searchState.currentFacet = facet
+ handleClick(facet: Facet) {
+ this.facetClick(facet.name)
}
render() {
@@ -31,12 +32,13 @@ export class OramaFacets {
return
}
return (
-
+
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
index 1a084d2a..be6e8098 100644
--- a/packages/ui-stencil/src/components/internal/orama-facets/readme.md
+++ b/packages/ui-stencil/src/components/internal/orama-facets/readme.md
@@ -7,9 +7,11 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------- | --------- | ----------- | ------- | ----------- |
-| `facets` | -- | | `any[]` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ----------- | ----------------------------- | ----------- |
+| `facetClick` | -- | | `(facetName: string) => void` | `undefined` |
+| `facets` | -- | | `Facet[]` | `undefined` |
+| `selectedFacet` | `selected-facet` | | `string` | `undefined` |
## Dependencies
diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss
index c58aa1c2..3d90c9f1 100644
--- a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss
+++ b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss
@@ -4,6 +4,11 @@
margin: 0;
}
+.section-title-wrapper {
+ text-transform: capitalize;
+ padding: var(--spacing-l, $spacing-l) var(--spacing-m, $spacing-m);
+}
+
.list-item {
margin-top: var(--spacing-s, $spacing-s);
cursor: pointer;
diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
index ba89a375..3481b20e 100644
--- a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
@@ -1,15 +1,8 @@
-import { Component, Host, h, Element, Prop, Event } from '@stencil/core'
-import type { EventEmitter } from '@stencil/core'
-
-export type SearchItem = {
- id: string
- title: string
- description: string
- path?: string
-}
+import { Component, Host, h, Element, Prop, Event, type EventEmitter } from '@stencil/core'
+import type { SearchResult, SearchResultBySection } from '@/types'
export type SearchResultsProps = {
- items: SearchItem[] | null
+ sections: SearchResultBySection[]
searchTerm?: string
}
@@ -20,12 +13,12 @@ export type SearchResultsProps = {
export class SearchResults {
@Element() el: HTMLUListElement
- @Event() oramaItemClick: EventEmitter
+ @Event() oramaItemClick: EventEmitter
- @Prop() items: SearchResultsProps['items']
+ @Prop() sections: SearchResultBySection[] = []
@Prop() searchTerm: SearchResultsProps['searchTerm']
- handleItemClick = (item: SearchItem) => {
+ handleItemClick = (item: SearchResult) => {
if (item?.path) {
this.oramaItemClick.emit(item)
window.location.href = item.path
@@ -35,7 +28,7 @@ export class SearchResults {
}
render() {
- if (!this.items?.length) {
+ if (!this.sections.length) {
return (
@@ -48,19 +41,32 @@ export class SearchResults {
return (
- {this.items.map((item) => (
-
- this.handleItemClick(item)}>
-
-
- {item.title}
-
-
- {item.description}
+ {this.sections.map((section) => (
+
+ {section.section && (
+
+
+ {section.section}
-
-
+ )}
+
+ {section.items.map((result) => (
+
+ this.handleItemClick(result)}>
+
+
+ {result.title}
+
+
+ {result.description}
+
+
+
+
+ ))}
+
+
))}
diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md b/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
index 8e924840..52d3dba0 100644
--- a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
+++ b/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
@@ -1,23 +1,21 @@
# orama-search-results
-
-
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------ | ------------- | ----------- | -------------- | ----------- |
-| `items` | -- | | `SearchItem[]` | `undefined` |
-| `searchTerm` | `search-term` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------ | ------------- | ----------- | ------------------------- | ----------- |
+| `searchTerm` | `search-term` | | `string` | `undefined` |
+| `sections` | -- | | `SearchResultBySection[]` | `[]` |
## Events
-| Event | Description | Type |
-| ---------------- | ----------- | --------------------------------------------------------------------------------- |
-| `oramaItemClick` | | `CustomEvent<{ id: string; title: string; description: string; path?: string; }>` |
+| Event | Description | Type |
+| ---------------- | ----------- | -------------------------------------------------------------------------------- |
+| `oramaItemClick` | | `CustomEvent<{ id: string; title: string; description: string; path: string; }>` |
## Dependencies
diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
index fd51deaf..ae2e151d 100644
--- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
+++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
@@ -1,3 +1,30 @@
orama-search {
- padding: var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ padding: var(--spacing-s, $spacing-s) 0;
+}
+
+orama-input {
+ padding: 0 var(--spacing-l, $spacing-l);
+}
+
+.result-wrapper {
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 0 var(--spacing-l, $spacing-l);
+
+ // TODO: check scroll styles
+ // Maybe move somewhere else to reuse in some somponents, but not globally
+ &::-webkit-scrollbar {
+ width: 0.3em;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ // TODO: Should it be a variable?
+ background-color: #b2b2b285;
+ border-radius: var(--border-radius-l, $radius-l);
+ }
}
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
index b7f5082d..f3644a44 100644
--- 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,5 @@
import { Component, Host, State, Watch, h } from '@stencil/core'
-import { searchState, searchStore } from '@/context/searchContext'
-import type { SearchResultsProps } from '@/components/internal/orama-search-results/orama-search-results'
+import { searchState } from '@/context/searchContext'
@Component({
tag: 'orama-search',
@@ -8,46 +7,19 @@ import type { SearchResultsProps } from '@/components/internal/orama-search-resu
})
export class OramaSearch {
@State() searchValue = ''
- @State() searchResults: SearchResultsProps['items'] = []
- @State() facets = []
+ @State() selectedFacet = ''
@Watch('searchValue')
- handleSearchValueChange(newValue: string) {
- searchState.searchService.search(newValue)
-
- // TODO: should be moved to service
- searchStore.onChange('hits', (hits) => {
- this.searchResults = hits.map((hit) => ({
- id: hit.document.id,
- title: hit.document.title,
- description: hit.document.content,
- path: hit.document.path,
- }))
- })
+ @Watch('selectedFacet')
+ handleSearchValueChange() {
+ searchState.searchService.search(this.searchValue, this.selectedFacet)
+ }
- // TODO: category should be dynamic and taken from resultsMap
- searchStore.onChange('facets', (facets) => {
- if (!searchState.facetProperty && !facets[searchState.facetProperty]?.values) {
- return
- }
- 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],
- }
- })
- this.facets = [
- {
- name: 'All',
- count: totalCount,
- },
- ...allFacets,
- ]
- })
+ onFacetClickHandler = (facetName: string) => {
+ this.selectedFacet = facetName
}
- onSearch(e: Event) {
+ onInputChange = (e: Event) => {
this.searchValue = (e.target as HTMLInputElement).value
searchState.term = this.searchValue
}
@@ -58,13 +30,19 @@ export class OramaSearch {
-
-
+
+
+
+
)
}
diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx
index f49ab578..2a7e85ab 100644
--- a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx
@@ -20,10 +20,12 @@ export class OramaTextarea {
textarea!: HTMLTextAreaElement
shadowTextarea!: HTMLTextAreaElement
- componentDidLoad() {
- this.syncHeight()
+ componentDidLoad() {}
+
+ componetWillLoad() {
this.startAdornmentWidth = this.getNamedSlotWidth('adornment-start')
this.endAdornmentWidth = this.getNamedSlotWidth('adornment-end')
+ this.syncHeight()
}
getNamedSlotWidth(slotName: string) {
diff --git a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx
index e9bf48c3..f91f95b3 100644
--- a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx
+++ b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx
@@ -1,5 +1,5 @@
import { Component, Host, Prop, h } from '@stencil/core'
-import { globalContext } from '@/context/searchBoxContext'
+import { globalContext } from '@/context/GlobalContext'
import '@phosphor-icons/webcomponents/PhMagnifyingGlass'
import '@phosphor-icons/webcomponents/PhSparkle'
diff --git a/packages/ui-stencil/src/components/search-box-toggler/search-box-toggler.tsx b/packages/ui-stencil/src/components/search-box-toggler/search-box-toggler.tsx
index 983c70a5..51552c68 100644
--- a/packages/ui-stencil/src/components/search-box-toggler/search-box-toggler.tsx
+++ b/packages/ui-stencil/src/components/search-box-toggler/search-box-toggler.tsx
@@ -1,5 +1,5 @@
import { Component, Host, h } from '@stencil/core'
-import { searchState } from '@/context/searchContext'
+import { globalContext } from '@/context/GlobalContext'
@Component({
tag: 'search-box-toggler',
@@ -12,7 +12,7 @@ export class SearchBoxToggler {
{
- searchState.open = !searchState.open
+ globalContext.open = !globalContext.open
}}
>
Toggle
diff --git a/packages/ui-stencil/src/components/search-box/readme.md b/packages/ui-stencil/src/components/search-box/readme.md
index f481ffbb..31b5a97a 100644
--- a/packages/ui-stencil/src/components/search-box/readme.md
+++ b/packages/ui-stencil/src/components/search-box/readme.md
@@ -5,12 +5,13 @@
## Properties
-| 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` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ----------- | ------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| `color` | `color` | | `"dark" \| "light" \| "system"` | `undefined` |
+| `facetProperty` | `facet-property` | | `string` | `undefined` |
+| `open` | `open` | | `boolean` | `false` |
+| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{ description: 'title', section: 'category' }` |
+| `themeConfig` | -- | | `{ colors: { light: { primaryColor: string; }; dark: { primaryColor: string; }; }; }` | `undefined` |
## Dependencies
diff --git a/packages/ui-stencil/src/components/search-box/search-box.scss b/packages/ui-stencil/src/components/search-box/search-box.scss
index e15bea4f..0ec66648 100644
--- a/packages/ui-stencil/src/components/search-box/search-box.scss
+++ b/packages/ui-stencil/src/components/search-box/search-box.scss
@@ -1,14 +1,19 @@
:host {
+ display: block;
+}
+
+.orama-container {
+ display: flex;
+ background-color: var(--background-color-primary, background('primary'));
position: fixed;
- top: 0;
- left: 0;
- right: 0;
+ inset: 0;
z-index: 1000;
- height: 100vh;
- display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--spacing-s, $spacing-s) 0;
+ &.hidden {
+ display: none;
+ }
}
.main {
diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
index 6f2cc665..9648233f 100644
--- a/packages/ui-stencil/src/components/search-box/search-box.tsx
+++ b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -2,9 +2,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 { globalContext } from '@/context/GlobalContext'
import { ChatService } from '@/services/ChatService'
import { SearchService } from '@/services/SearchService'
+import type { ResultMap } from '@/types'
@Component({
tag: 'search-box',
@@ -15,11 +16,13 @@ export class SearchBox {
@Prop() themeConfig: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } }
@Prop() color: 'dark' | 'light' | 'system'
@Prop() facetProperty: string
- @Prop() open: false
+ @Prop() open = false
+ // TODO: Remove default values as soon as we have StoryBook fully working
+ @Prop() resultMap: Partial = { description: 'title', section: 'category' }
@Watch('open')
handleOpenChange(newValue: boolean) {
- searchState.open = newValue
+ globalContext.open = newValue
}
@Watch('facetProperty')
@@ -34,12 +37,18 @@ export class SearchBox {
}
componentWillLoad() {
- searchState.open = this.open
+ globalContext.open = this.open
+
+ // TODO: We probable want to keep these props below whithin the respective service
+ // instance property. I seems to make sense to pass it as initialization prop.
+ // Same goes for any other Chat init prop. Lets talk about it as well, please.
+
searchState.facetProperty = this.facetProperty
+ searchState.resultMap = this.resultMap
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',
})
searchState.searchService = new SearchService(oramaClient)
@@ -47,24 +56,32 @@ export class SearchBox {
}
render() {
- if (!searchState.open) {
- return null
- }
-
return (
- {/* NAVIGATION - to replace with component */}
-
-
-
- {/* MAIN CONTENT */}
-
-
-
-
- {/* FOOTER - to replace with component */}
-