Merge pull request #59 from oramasearch/feature/orm-1915

Feature/orm-1915
oramasearch · Oct 30, 2024 · 4f858e1 · 4f858e1
2 parents 3ef9218 + 916bebc
commit 4f858e1
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 101 deletions.
diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -14,7 +14,6 @@ export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent<JSX.O
 export const OramaChatBox = /*@__PURE__*/createReactComponent<JSX.OramaChatBox, HTMLOramaChatBoxElement>('orama-chat-box');
 export const OramaChatButton = /*@__PURE__*/createReactComponent<JSX.OramaChatButton, HTMLOramaChatButtonElement>('orama-chat-button');
 export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.OramaChatMessagesContainer, HTMLOramaChatMessagesContainerElement>('orama-chat-messages-container');
-export const OramaChatSuggestions = /*@__PURE__*/createReactComponent<JSX.OramaChatSuggestions, HTMLOramaChatSuggestionsElement>('orama-chat-suggestions');
 export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
 export const OramaDotsLoader = /*@__PURE__*/createReactComponent<JSX.OramaDotsLoader, HTMLOramaDotsLoaderElement>('orama-dots-loader');
 export const OramaEmbed = /*@__PURE__*/createReactComponent<JSX.OramaEmbed, HTMLOramaEmbedElement>('orama-embed');
@@ -31,6 +30,7 @@ export const OramaSearchButton = /*@__PURE__*/createReactComponent<JSX.OramaSear
 export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');
 export const OramaSlidingPanel = /*@__PURE__*/createReactComponent<JSX.OramaSlidingPanel, HTMLOramaSlidingPanelElement>('orama-sliding-panel');
 export const OramaSources = /*@__PURE__*/createReactComponent<JSX.OramaSources, HTMLOramaSourcesElement>('orama-sources');
+export const OramaSuggestions = /*@__PURE__*/createReactComponent<JSX.OramaSuggestions, HTMLOramaSuggestionsElement>('orama-suggestions');
 export const OramaText = /*@__PURE__*/createReactComponent<JSX.OramaText, HTMLOramaTextElement>('orama-text');
 export const OramaTextarea = /*@__PURE__*/createReactComponent<JSX.OramaTextarea, HTMLOramaTextareaElement>('orama-textarea');
 export const OramaToggler = /*@__PURE__*/createReactComponent<JSX.OramaToggler, HTMLOramaTogglerElement>('orama-toggler');
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -65,14 +65,6 @@ export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer<JSX.Oram
 ]);
 
 
-export const OramaChatSuggestions = /*@__PURE__*/ defineContainer<JSX.OramaChatSuggestions>('orama-chat-suggestions', undefined, [
-  'suggestions',
-  'as',
-  'icon',
-  'suggestionClicked'
-]);
-
-
 export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatUserMessage>('orama-chat-user-message', undefined, [
   'interaction'
 ]);
@@ -214,6 +206,14 @@ export const OramaSources = /*@__PURE__*/ defineContainer<JSX.OramaSources>('ora
 ]);
 
 
+export const OramaSuggestions = /*@__PURE__*/ defineContainer<JSX.OramaSuggestions>('orama-suggestions', undefined, [
+  'suggestions',
+  'as',
+  'icon',
+  'suggestionClicked'
+]);
+
+
 export const OramaText = /*@__PURE__*/ defineContainer<JSX.OramaText>('orama-text', undefined, [
   'as',
   'styledAs',

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -77,12 +77,6 @@ export namespace Components {
     interface OramaChatMessagesContainer {
         "interactions": TChatInteraction[];
     }
-    interface OramaChatSuggestions {
-        "as": 'chips' | 'list';
-        "icon": Node;
-        "suggestionClicked": (suggestion: string) => void;
-        "suggestions": string[];
-    }
     interface OramaChatUserMessage {
         "interaction": TChatInteraction;
     }
@@ -189,6 +183,12 @@ export namespace Components {
         "sources": any;
         "sourcesMap"?: SourcesMap;
     }
+    interface OramaSuggestions {
+        "as": 'chips' | 'list';
+        "icon"?: Node;
+        "suggestionClicked": (suggestion: string) => void;
+        "suggestions": string[];
+    }
     interface OramaText {
         /**
           * optionally change text alignment
@@ -284,12 +284,6 @@ declare global {
         prototype: HTMLOramaChatMessagesContainerElement;
         new (): HTMLOramaChatMessagesContainerElement;
     };
-    interface HTMLOramaChatSuggestionsElement extends Components.OramaChatSuggestions, HTMLStencilElement {
-    }
-    var HTMLOramaChatSuggestionsElement: {
-        prototype: HTMLOramaChatSuggestionsElement;
-        new (): HTMLOramaChatSuggestionsElement;
-    };
     interface HTMLOramaChatUserMessageElement extends Components.OramaChatUserMessage, HTMLStencilElement {
     }
     var HTMLOramaChatUserMessageElement: {
@@ -443,6 +437,12 @@ declare global {
         prototype: HTMLOramaSourcesElement;
         new (): HTMLOramaSourcesElement;
     };
+    interface HTMLOramaSuggestionsElement extends Components.OramaSuggestions, HTMLStencilElement {
+    }
+    var HTMLOramaSuggestionsElement: {
+        prototype: HTMLOramaSuggestionsElement;
+        new (): HTMLOramaSuggestionsElement;
+    };
     interface HTMLOramaTextElement extends Components.OramaText, HTMLStencilElement {
     }
     var HTMLOramaTextElement: {
@@ -468,7 +468,6 @@ declare global {
         "orama-chat-box": HTMLOramaChatBoxElement;
         "orama-chat-button": HTMLOramaChatButtonElement;
         "orama-chat-messages-container": HTMLOramaChatMessagesContainerElement;
-        "orama-chat-suggestions": HTMLOramaChatSuggestionsElement;
         "orama-chat-user-message": HTMLOramaChatUserMessageElement;
         "orama-dots-loader": HTMLOramaDotsLoaderElement;
         "orama-embed": HTMLOramaEmbedElement;
@@ -485,6 +484,7 @@ declare global {
         "orama-search-results": HTMLOramaSearchResultsElement;
         "orama-sliding-panel": HTMLOramaSlidingPanelElement;
         "orama-sources": HTMLOramaSourcesElement;
+        "orama-suggestions": HTMLOramaSuggestionsElement;
         "orama-text": HTMLOramaTextElement;
         "orama-textarea": HTMLOramaTextareaElement;
         "orama-toggler": HTMLOramaTogglerElement;
@@ -536,12 +536,6 @@ declare namespace LocalJSX {
     interface OramaChatMessagesContainer {
         "interactions"?: TChatInteraction[];
     }
-    interface OramaChatSuggestions {
-        "as"?: 'chips' | 'list';
-        "icon"?: Node;
-        "suggestionClicked"?: (suggestion: string) => void;
-        "suggestions"?: string[];
-    }
     interface OramaChatUserMessage {
         "interaction"?: TChatInteraction;
     }
@@ -655,6 +649,12 @@ declare namespace LocalJSX {
         "sources"?: any;
         "sourcesMap"?: SourcesMap;
     }
+    interface OramaSuggestions {
+        "as"?: 'chips' | 'list';
+        "icon"?: Node;
+        "suggestionClicked"?: (suggestion: string) => void;
+        "suggestions"?: string[];
+    }
     interface OramaText {
         /**
           * optionally change text alignment
@@ -699,7 +699,6 @@ declare namespace LocalJSX {
         "orama-chat-box": OramaChatBox;
         "orama-chat-button": OramaChatButton;
         "orama-chat-messages-container": OramaChatMessagesContainer;
-        "orama-chat-suggestions": OramaChatSuggestions;
         "orama-chat-user-message": OramaChatUserMessage;
         "orama-dots-loader": OramaDotsLoader;
         "orama-embed": OramaEmbed;
@@ -716,6 +715,7 @@ declare namespace LocalJSX {
         "orama-search-results": OramaSearchResults;
         "orama-sliding-panel": OramaSlidingPanel;
         "orama-sources": OramaSources;
+        "orama-suggestions": OramaSuggestions;
         "orama-text": OramaText;
         "orama-textarea": OramaTextarea;
         "orama-toggler": OramaToggler;
@@ -731,7 +731,6 @@ declare module "@stencil/core" {
             "orama-chat-box": LocalJSX.OramaChatBox & JSXBase.HTMLAttributes<HTMLOramaChatBoxElement>;
             "orama-chat-button": LocalJSX.OramaChatButton & JSXBase.HTMLAttributes<HTMLOramaChatButtonElement>;
             "orama-chat-messages-container": LocalJSX.OramaChatMessagesContainer & JSXBase.HTMLAttributes<HTMLOramaChatMessagesContainerElement>;
-            "orama-chat-suggestions": LocalJSX.OramaChatSuggestions & JSXBase.HTMLAttributes<HTMLOramaChatSuggestionsElement>;
             "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes<HTMLOramaChatUserMessageElement>;
             "orama-dots-loader": LocalJSX.OramaDotsLoader & JSXBase.HTMLAttributes<HTMLOramaDotsLoaderElement>;
             "orama-embed": LocalJSX.OramaEmbed & JSXBase.HTMLAttributes<HTMLOramaEmbedElement>;
@@ -748,6 +747,7 @@ declare module "@stencil/core" {
             "orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes<HTMLOramaSearchResultsElement>;
             "orama-sliding-panel": LocalJSX.OramaSlidingPanel & JSXBase.HTMLAttributes<HTMLOramaSlidingPanelElement>;
             "orama-sources": LocalJSX.OramaSources & JSXBase.HTMLAttributes<HTMLOramaSourcesElement>;
+            "orama-suggestions": LocalJSX.OramaSuggestions & JSXBase.HTMLAttributes<HTMLOramaSuggestionsElement>;
             "orama-text": LocalJSX.OramaText & JSXBase.HTMLAttributes<HTMLOramaTextElement>;
             "orama-textarea": LocalJSX.OramaTextarea & JSXBase.HTMLAttributes<HTMLOramaTextareaElement>;
             "orama-toggler": LocalJSX.OramaToggler & JSXBase.HTMLAttributes<HTMLOramaTogglerElement>;

diff --git a/...l/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/...l/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx
@@ -50,7 +50,8 @@ export class OramaChatMessagesContainer {
               <orama-chat-assistent-message interaction={{ ...interaction }} />
               {interaction.latest && interaction.status === 'done' && !!interaction.relatedQueries?.length && (
                 <div class="suggestions-wrapper">
-                  <orama-chat-suggestions
+                  <orama-suggestions
+                    as="chips"
                     suggestions={interaction.relatedQueries}
                     suggestionClicked={this.onSuggestionClick}
                   />

diff --git a/...ages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md b/...ages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md
@@ -22,14 +22,14 @@
 
 - [orama-chat-user-message](orama-chat-user-message)
 - [orama-chat-assistent-message](orama-chat-assistent-message)
-- [orama-chat-suggestions](../orama-chat-suggestions)
+- [orama-suggestions](../orama-suggestions)
 
 ### Graph
 ```mermaid
 graph TD;
   orama-chat-messages-container --> orama-chat-user-message
   orama-chat-messages-container --> orama-chat-assistent-message
-  orama-chat-messages-container --> orama-chat-suggestions
+  orama-chat-messages-container --> orama-suggestions
   orama-chat-user-message --> orama-text
   orama-chat-assistent-message --> orama-dots-loader
   orama-chat-assistent-message --> orama-text

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
@@ -284,7 +284,7 @@ export class OramaChat {
                   <slot name="chat-empty-state" />
                   {!!this.suggestions?.length && (
                     <div class="suggestions-wrapper">
-                      <orama-chat-suggestions
+                      <orama-suggestions
                         suggestions={this.suggestions}
                         suggestionClicked={this.handleSuggestionClick}
                       />

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md
@@ -31,7 +31,7 @@
 ### Depends on
 
 - [orama-chat-messages-container](../orama-chat-messages-container)
-- [orama-chat-suggestions](../orama-chat-suggestions)
+- [orama-suggestions](../orama-suggestions)
 - [orama-textarea](../orama-textarea)
 - [orama-button](../orama-button)
 - [orama-text](../orama-text)
@@ -40,13 +40,13 @@
 ```mermaid
 graph TD;
   orama-chat --> orama-chat-messages-container
-  orama-chat --> orama-chat-suggestions
+  orama-chat --> orama-suggestions
   orama-chat --> orama-textarea
   orama-chat --> orama-button
   orama-chat --> orama-text
   orama-chat-messages-container --> orama-chat-user-message
   orama-chat-messages-container --> orama-chat-assistent-message
-  orama-chat-messages-container --> orama-chat-suggestions
+  orama-chat-messages-container --> orama-suggestions
   orama-chat-user-message --> orama-text
   orama-chat-assistent-message --> orama-dots-loader
   orama-chat-assistent-message --> orama-text

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
@@ -94,10 +94,10 @@ export class SearchResults {
               Suggestions
             </orama-text>
           )}
-          <orama-chat-suggestions
+          <orama-suggestions
             as="list"
-            icon={<Icon name="starFour" size={16} color="var(--text-color-accent, text-color('accent')" />}
             suggestions={this.suggestions}
+            icon={<Icon name="starFour" size={16} color="var(--text-color-accent, text-color('accent')" />}
             suggestionClicked={(term) => {
               this.setChatTerm(term)
             }}

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
@@ -36,13 +36,13 @@
 ### Depends on
 
 - [orama-text](../orama-text)
-- [orama-chat-suggestions](../orama-chat-suggestions)
+- [orama-suggestions](../orama-suggestions)
 
 ### Graph
 ```mermaid
 graph TD;
   orama-search-results --> orama-text
-  orama-search-results --> orama-chat-suggestions
+  orama-search-results --> orama-suggestions
   orama-search --> orama-search-results
   style orama-search-results fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/ui-stencil/src/components/internal/orama-search/readme.md b/packages/ui-stencil/src/components/internal/orama-search/readme.md
@@ -39,7 +39,7 @@ graph TD;
   orama-search --> orama-facets
   orama-search --> orama-search-results
   orama-search-results --> orama-text
-  orama-search-results --> orama-chat-suggestions
+  orama-search-results --> orama-suggestions
   orama-search-box --> orama-search
   style orama-search fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/...t-suggestions/orama-chat-suggestions.scss → .../orama-suggestions/orama-suggestions.scss b/...t-suggestions/orama-chat-suggestions.scss → .../orama-suggestions/orama-suggestions.scss
@@ -1,7 +1,3 @@
-:host {
-  display: block;
-}
-
 .suggestions-chips {
   display: flex;
   align-items: center;

diff --git a/...at-suggestions/orama-chat-suggestions.tsx → ...l/orama-suggestions/orama-suggestions.tsx b/...at-suggestions/orama-chat-suggestions.tsx → ...l/orama-suggestions/orama-suggestions.tsx
@@ -1,17 +1,21 @@
 import { Component, h, Prop } from '@stencil/core'
+import { Icon } from '@/components/internal/icons'
 
 @Component({
-  tag: 'orama-chat-suggestions',
-  styleUrl: 'orama-chat-suggestions.scss',
+  tag: 'orama-suggestions',
+  styleUrl: 'orama-suggestions.scss',
   scoped: true,
 })
-export class OramaChatSuggestions {
+export class OramaSuggestions {
   @Prop() suggestions: string[]
   @Prop() as: 'chips' | 'list' = 'chips'
-  @Prop() icon: Node
+  @Prop() icon?: Node
   @Prop() suggestionClicked: (suggestion: string) => void
 
   handleClick(suggestion: string) {
+    if (!this.suggestionClicked) {
+      return
+    }
     this.suggestionClicked(suggestion)
   }
 
@@ -29,7 +33,7 @@ export class OramaChatSuggestions {
       <ul class={`suggestions-${classSuffix}`}>
         {this.suggestions.map((suggestion) => {
           return (
-            <li key={suggestion} class={`suggestion-item-${classSuffix}`}>
+            <li key={suggestion.split(' ').join('-').toLowerCase()} class={`suggestion-item-${classSuffix}`}>
               <button
                 focus-on-arrow-nav
                 type="button"

diff --git a/...internal/orama-chat-suggestions/readme.md → ...ents/internal/orama-suggestions/readme.md b/...internal/orama-chat-suggestions/readme.md → ...ents/internal/orama-suggestions/readme.md
@@ -1,4 +1,4 @@
-# orama-button
+# orama-suggestions
 
 
 
@@ -26,10 +26,10 @@
 ### Graph
 ```mermaid
 graph TD;
-  orama-chat --> orama-chat-suggestions
-  orama-chat-messages-container --> orama-chat-suggestions
-  orama-search-results --> orama-chat-suggestions
-  style orama-chat-suggestions fill:#f9f,stroke:#333,stroke-width:4px
+  orama-chat --> orama-suggestions
+  orama-chat-messages-container --> orama-suggestions
+  orama-search-results --> orama-suggestions
+  style orama-suggestions fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -34,13 +34,13 @@ graph TD;
   orama-chat-box --> orama-text
   orama-chat-box --> orama-chat
   orama-chat --> orama-chat-messages-container
-  orama-chat --> orama-chat-suggestions
+  orama-chat --> orama-suggestions
   orama-chat --> orama-textarea
   orama-chat --> orama-button
   orama-chat --> orama-text
   orama-chat-messages-container --> orama-chat-user-message
   orama-chat-messages-container --> orama-chat-assistent-message
-  orama-chat-messages-container --> orama-chat-suggestions
+  orama-chat-messages-container --> orama-suggestions
   orama-chat-user-message --> orama-text
   orama-chat-assistent-message --> orama-dots-loader
   orama-chat-assistent-message --> orama-text

diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md
@@ -66,15 +66,15 @@ graph TD;
   orama-search --> orama-facets
   orama-search --> orama-search-results
   orama-search-results --> orama-text
-  orama-search-results --> orama-chat-suggestions
+  orama-search-results --> orama-suggestions
   orama-chat --> orama-chat-messages-container
-  orama-chat --> orama-chat-suggestions
+  orama-chat --> orama-suggestions
   orama-chat --> orama-textarea
   orama-chat --> orama-button
   orama-chat --> orama-text
   orama-chat-messages-container --> orama-chat-user-message
   orama-chat-messages-container --> orama-chat-assistent-message
-  orama-chat-messages-container --> orama-chat-suggestions
+  orama-chat-messages-container --> orama-suggestions
   orama-chat-user-message --> orama-text
   orama-chat-assistent-message --> orama-dots-loader
   orama-chat-assistent-message --> orama-text