feat: add summary button

oramasearch · Aug 1, 2024 · d5b358c · d5b358c
1 parent 6776dd1
commit d5b358c
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 10 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
@@ -11,6 +11,7 @@ export const OramaButton = /*@__PURE__*/createReactComponent<JSX.OramaButton, HT
 export const OramaChat = /*@__PURE__*/createReactComponent<JSX.OramaChat, HTMLOramaChatElement>('orama-chat');
 export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatAssistentMessage, HTMLOramaChatAssistentMessageElement>('orama-chat-assistent-message');
 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');

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -39,6 +39,12 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
 ]);
 
 
+export const OramaChatButton = /*@__PURE__*/ defineContainer<JSX.OramaChatButton>('orama-chat-button', undefined, [
+  'label',
+  'class'
+]);
+
+
 export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer<JSX.OramaChatMessagesContainer>('orama-chat-messages-container', undefined, [
   'interactions'
 ]);

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -45,6 +45,10 @@ export namespace Components {
         "sourceBaseUrl"?: string;
         "sourcesMap"?: SourcesMap;
     }
+    interface OramaChatButton {
+        "class"?: string;
+        "label": string;
+    }
     interface OramaChatMessagesContainer {
         "interactions": TChatInteraction[];
     }
@@ -163,6 +167,12 @@ declare global {
         prototype: HTMLOramaChatBoxElement;
         new (): HTMLOramaChatBoxElement;
     };
+    interface HTMLOramaChatButtonElement extends Components.OramaChatButton, HTMLStencilElement {
+    }
+    var HTMLOramaChatButtonElement: {
+        prototype: HTMLOramaChatButtonElement;
+        new (): HTMLOramaChatButtonElement;
+    };
     interface HTMLOramaChatMessagesContainerElement extends Components.OramaChatMessagesContainer, HTMLStencilElement {
     }
     var HTMLOramaChatMessagesContainerElement: {
@@ -286,6 +296,7 @@ declare global {
         "orama-chat": HTMLOramaChatElement;
         "orama-chat-assistent-message": HTMLOramaChatAssistentMessageElement;
         "orama-chat-box": HTMLOramaChatBoxElement;
+        "orama-chat-button": HTMLOramaChatButtonElement;
         "orama-chat-messages-container": HTMLOramaChatMessagesContainerElement;
         "orama-chat-suggestions": HTMLOramaChatSuggestionsElement;
         "orama-chat-user-message": HTMLOramaChatUserMessageElement;
@@ -328,6 +339,10 @@ declare namespace LocalJSX {
         "sourceBaseUrl"?: string;
         "sourcesMap"?: SourcesMap;
     }
+    interface OramaChatButton {
+        "class"?: string;
+        "label"?: string;
+    }
     interface OramaChatMessagesContainer {
         "interactions"?: TChatInteraction[];
     }
@@ -419,6 +434,7 @@ declare namespace LocalJSX {
         "orama-chat": OramaChat;
         "orama-chat-assistent-message": OramaChatAssistentMessage;
         "orama-chat-box": OramaChatBox;
+        "orama-chat-button": OramaChatButton;
         "orama-chat-messages-container": OramaChatMessagesContainer;
         "orama-chat-suggestions": OramaChatSuggestions;
         "orama-chat-user-message": OramaChatUserMessage;
@@ -445,6 +461,7 @@ declare module "@stencil/core" {
             "orama-chat": LocalJSX.OramaChat & JSXBase.HTMLAttributes<HTMLOramaChatElement>;
             "orama-chat-assistent-message": LocalJSX.OramaChatAssistentMessage & JSXBase.HTMLAttributes<HTMLOramaChatAssistentMessageElement>;
             "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>;

diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss
@@ -0,0 +1,22 @@
+:host {
+  padding: var(--spacing-s, $spacing-s);
+}
+
+.chat-button {
+  @include paragraph();
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-s, $spacing-s);
+  align-items: center;
+  gap: var(--spacing-s, $spacing-s);
+  cursor: pointer;
+  border-radius: var(--spacing-s, $spacing-s);
+  border: 1px solid transparent;
+  background-color: transparent;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--background-color-tertiary, background-color('tertiary'));
+    }
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx
@@ -0,0 +1,30 @@
+import { Component, Prop, h, Element, Host } from '@stencil/core'
+import { getNonExplicitAttributes } from '@/utils/utils'
+
+@Component({
+  tag: 'orama-chat-button',
+  styleUrl: 'orama-chat-button.scss',
+  shadow: true,
+})
+/**
+ * The orama-chat-button component is used to render a button element that will trigger the chat.
+ */
+export class OramaChatButton {
+  @Element() el: HTMLButtonElement
+
+  @Prop() label: string
+  @Prop() class?: string
+
+  render() {
+    const declaredProps = ['label', 'onClick', 'class']
+    const buttonProps = getNonExplicitAttributes(this.el, declaredProps)
+
+    return (
+      <Host class={this.class}>
+        <button class="chat-button" {...buttonProps} type="button">
+          {this.label}
+        </button>
+      </Host>
+    )
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md
@@ -0,0 +1,31 @@
+# orama-chat-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `class`  | `class`   |             | `string` | `undefined` |
+| `label`  | `label`   |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [orama-search](../orama-search)
+
+### Graph
+```mermaid
+graph TD;
+  orama-search --> orama-chat-button
+  style orama-chat-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
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
@@ -40,6 +40,11 @@ export class OramaSearch {
           labelForScreenReaders="Search..."
           placeholder="Search..."
         />
+        <orama-chat-button
+          label={`${this.searchValue ? `${this.searchValue} - ` : ''}Get a summary`}
+          onClick={() => alert('Chat clicked')}
+          onKeyPress={() => alert('Chat key pressed')}
+        />
         <div class="result-wrapper">
           <orama-facets
             facets={searchState.facets}

diff --git a/packages/ui-stencil/src/components/internal/orama-search/readme.md b/packages/ui-stencil/src/components/internal/orama-search/readme.md
@@ -14,13 +14,15 @@
 ### Depends on
 
 - [orama-input](../orama-input)
+- [orama-chat-button](../orama-chat-button)
 - [orama-facets](../orama-facets)
 - [orama-search-results](../orama-search-results)
 
 ### Graph
 ```mermaid
 graph TD;
   orama-search --> orama-input
+  orama-search --> orama-chat-button
   orama-search --> orama-facets
   orama-search --> orama-search-results
   orama-search-results --> orama-text

diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss
@@ -4,12 +4,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--backdrop-color-primary, palette('backdrop', 'primary'));
 }
 
 .inner-container {
   display: flex;
-  background-color: var(--background-color-primary, background('primary'));
+  background-color: var(--background-color-secondary, background('seconday'));
   position: fixed;
   inset: 0;
   z-index: 1000;