refactor: rename cloudIndex as index and make clear chat hideable

oramasearch · Jul 30, 2024 · dbd9313 · dbd9313
1 parent c83f241
commit dbd9313
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 30 deletions.
diff --git a/apps/storybook/stories/Welcome.mdx b/apps/storybook/stories/Welcome.mdx
@@ -11,6 +11,6 @@ Here you can find a collection of stories that showcase the Orama UI Kit compone
 The Orama UI Kit is a collection of components and patterns that make up the design system. The components are designed to easily integrate search and chat functionality in your project. They are available as web components, React components, Vue components, and Angular components.
 
 {/* create 3 boxes, one for Foundations, another for Components, and another for Contributing */}
-<div class="boxes">
+<div className="boxes">
   <Basics />
 </div>
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -46,7 +46,7 @@ export const SearchBox: Story = {
         },
       },
     },
-    cloudIndex: {
+    index: {
       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
@@ -21,7 +21,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
 export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-chat', undefined, [
   'placeholder',
   'sourceBaseUrl',
-  'sourcesMap'
+  'sourcesMap',
+  'showClearChat'
 ]);
 
 
@@ -98,7 +99,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'facetProperty',
   'open',
   'resultMap',
-  'cloudIndex'
+  'index'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -32,6 +32,7 @@ export namespace Components {
     }
     interface OramaChat {
         "placeholder"?: string;
+        "showClearChat"?: boolean;
         "sourceBaseUrl"?: string;
         "sourcesMap"?: SourcesMap;
     }
@@ -81,9 +82,9 @@ export namespace Components {
     interface OramaSearch {
     }
     interface OramaSearchBox {
-        "cloudIndex": CloudIndexConfig;
         "colorScheme"?: 'dark' | 'light' | 'system';
         "facetProperty"?: string;
+        "index": CloudIndexConfig;
         "open"?: boolean;
         "resultMap"?: Partial<ResultMap>;
         "themeConfig"?: Partial<TThemeOverrides>;
@@ -314,6 +315,7 @@ declare namespace LocalJSX {
     }
     interface OramaChat {
         "placeholder"?: string;
+        "showClearChat"?: boolean;
         "sourceBaseUrl"?: string;
         "sourcesMap"?: SourcesMap;
     }
@@ -364,9 +366,9 @@ declare namespace LocalJSX {
     interface OramaSearch {
     }
     interface OramaSearchBox {
-        "cloudIndex"?: CloudIndexConfig;
         "colorScheme"?: 'dark' | 'light' | 'system';
         "facetProperty"?: string;
+        "index"?: CloudIndexConfig;
         "open"?: boolean;
         "resultMap"?: Partial<ResultMap>;
         "themeConfig"?: Partial<TThemeOverrides>;

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
@@ -22,6 +22,7 @@ export class OramaChat {
   @Prop() placeholder?: string = 'Ask me anything'
   @Prop() sourceBaseUrl?: string = ''
   @Prop() sourcesMap?: SourcesMap
+  @Prop() showClearChat?: boolean = true
   @State() inputValue = ''
   messagesContainerRef!: HTMLElement
   isScrolling = false
@@ -140,15 +141,17 @@ export class OramaChat {
     // ? Question: Maybe should be a orama-button variant?
     return (
       <Host>
-        <div class={{ header: true, hidden: chatContext.interactions?.length === 0 }}>
-          <button
-            type="button"
-            onClick={() => chatContext.chatService.resetChat()}
-            aria-hidden={chatContext.interactions?.length === 0}
-          >
-            <ph-arrow-clockwise weight="fill" size="14" /> Clear chat
-          </button>
-        </div>
+        {this.showClearChat && (
+          <div class={{ header: true, hidden: chatContext.interactions?.length === 0 }}>
+            <button
+              type="button"
+              onClick={() => chatContext.chatService.resetChat()}
+              aria-hidden={chatContext.interactions?.length === 0}
+            >
+              <ph-arrow-clockwise weight="fill" size="14" /> Clear chat
+            </button>
+          </div>
+        )}
         {/* CHAT MESSAGES */}
         <div class={'messages-container-wrapper-non-scrollable'}>
           <div class="messages-container-wrapper" ref={(ref) => (this.messagesContainerRef = ref)}>

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md
@@ -10,8 +10,9 @@
 | Property        | Attribute         | Description | Type                                                       | Default             |
 | --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- |
 | `placeholder`   | `placeholder`     |             | `string`                                                   | `'Ask me anything'` |
+| `showClearChat` | `show-clear-chat` |             | `boolean`                                                  | `true`              |
 | `sourceBaseUrl` | `source-base-url` |             | `string`                                                   | `''`                |
-| `sourcesMap`    | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined`         |
+| `sourcesMap`    | --                |             | `{ title?: string; description?: string; path?: string; }` | `undefined`         |
 
 
 ## Dependencies

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 @@
 | `index`         | --                |             | `{ api_key: string; endpoint: string; }`                   | `undefined` |
 | `placeholder`   | `placeholder`     |             | `string`                                                   | `undefined` |
 | `sourceBaseUrl` | `source-base-url` |             | `string`                                                   | `undefined` |
-| `sourcesMap`    | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined` |
+| `sourcesMap`    | --                |             | `{ title?: string; description?: string; path?: string; }` | `undefined` |
 
 
 ## Dependencies

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
@@ -22,12 +22,12 @@ export class SearchBox {
   @Prop() facetProperty?: string
   @Prop() open? = false
   @Prop() resultMap?: Partial<ResultMap> = {}
-  @Prop() cloudIndex: CloudIndexConfig
+  @Prop() index: CloudIndexConfig
 
   @State() systemScheme: 'light' | 'dark' = 'light'
 
-  @Watch('cloudIndex')
-  cloudIndexChanged() {
+  @Watch('index')
+  indexChanged() {
     this.startServices()
   }
 
@@ -97,7 +97,7 @@ export class SearchBox {
   }
 
   startServices() {
-    const oramaClient = initOramaClient(this.cloudIndex)
+    const oramaClient = initOramaClient(this.index)
     searchState.searchService = new SearchService(oramaClient)
     chatContext.chatService = new ChatService(oramaClient)
   }
@@ -132,7 +132,10 @@ export class SearchBox {
           <orama-navigation-bar />
           <div class="main">
             <orama-search style={{ display: globalContext.selectedTab === 'search' ? 'flex' : 'none' }} />
-            <orama-chat style={{ display: globalContext.selectedTab === 'chat' ? 'flex' : 'none' }} />
+            <orama-chat
+              style={{ display: globalContext.selectedTab === 'chat' ? 'flex' : 'none' }}
+              showClearChat={false}
+            />
           </div>
           {/* FOOTER - to replace with component */}
           {/* TODO: Hidden footer for now */}