Merge pull request #12 from askorama/feat/ORM-1510-chat-message-actions

chat message actions
oramasearch · Jul 22, 2024 · 7d95150 · 7d95150
2 parents 952311e + 00f3d52
commit 7d95150
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 21 deletions.
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -13,7 +13,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
   'class',
   'variant',
   'type',
-  'disabled'
+  'disabled',
+  'withTooltip'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -28,6 +28,7 @@ export namespace Components {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }
@@ -302,6 +303,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }

diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -1,5 +1,6 @@
 // TODO: We need to revisit this styles. There are some duplications and variables without fallback
 .button {
+  position: relative;
   display: inline-flex;
   gap: var(--spacing-s, $spacing-s);
   align-items: center;
@@ -8,9 +9,22 @@
   padding: var(--spacing-m, $spacing-m);
   cursor: pointer;
   font-family: var(--font-primary, font('primary'));
-
   transition: all 0.2s;
   transition-property: color, background-color, opacity;
+
+  &__tooltip {
+    display: block;
+    opacity: 0;
+    position: absolute;
+    background-color: var(--text-color-primary, text-color('primary'));
+    color: var(--background-color-primary, background-color('primary'));
+    padding: var(--spacing-s, $spacing-s);
+    border-radius: var(--radius-s, $radius-s);
+    font-size: 10px;
+    z-index: 1;
+    top: -28px;
+    animation: fadeInOut 1s ease-in-out 1;
+  }
 }
 
 .button--primary {
@@ -50,3 +64,15 @@
     background-color: var(--background-color-tertiary, background-color('tertiary'));
   }
 }
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -40,6 +40,7 @@ export class OramaButton {
   @Prop() variant?: ButtonProps['variant'] = 'primary'
   @Prop() type?: ButtonProps['type']
   @Prop() disabled?: boolean
+  @Prop() withTooltip?: string
 
   render() {
     const Tag = this.as
@@ -51,6 +52,7 @@ export class OramaButton {
     return (
       <Tag class={buttonClass} {...buttonProps} disabled={this.disabled}>
         <slot />
+        {this.withTooltip && <span class="button__tooltip">{this.withTooltip}</span>}
       </Tag>
     )
   }

diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                 | Default     |
-| ---------- | ---------- | ----------- | ------------------------------------ | ----------- |
-| `as`       | `as`       |             | `"a" \| "button"`                    | `'button'`  |
-| `class`    | `class`    |             | `string`                             | `undefined` |
-| `disabled` | `disabled` |             | `boolean`                            | `undefined` |
-| `type`     | `type`     |             | `"button" \| "reset" \| "submit"`    | `undefined` |
-| `variant`  | `variant`  |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| Property      | Attribute      | Description | Type                                 | Default     |
+| ------------- | -------------- | ----------- | ------------------------------------ | ----------- |
+| `as`          | `as`           |             | `"a" \| "button"`                    | `'button'`  |
+| `class`       | `class`        |             | `string`                             | `undefined` |
+| `disabled`    | `disabled`     |             | `boolean`                            | `undefined` |
+| `type`        | `type`         |             | `"button" \| "reset" \| "submit"`    | `undefined` |
+| `variant`     | `variant`      |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| `withTooltip` | `with-tooltip` |             | `string`                             | `undefined` |
 
 
 ## Dependencies

diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -59,3 +59,16 @@ orama-chat-assistent-message {
     white-space: nowrap;
   }
 }
+
+.retrying {
+  animation: rotate360 2s ease-in-out 1;
+}
+
+@keyframes rotate360 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, Prop, h } from '@stencil/core'
+import { Component, Host, Listen, Prop, State, h } from '@stencil/core'
 import type { TChatMessage } from '@/context/chatContext'
 import '@phosphor-icons/webcomponents/dist/icons/PhCopy.mjs'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowsClockwise.mjs'
@@ -13,24 +13,58 @@ import { copyToClipboard } from '@/utils/utils'
 export class OramaChatAssistentMessage {
   @Prop() message: TChatMessage
 
+  @State() isCopied = false
+  handleCopyToClipboard = () => {
+    this.isCopied = true
+    setTimeout(() => (this.isCopied = false), 1000)
+    copyToClipboard(this.message.content)
+  }
+
+  @State() isRetrying = false
+  handleRetryMessage = () => {
+    // todo: replace with actual retry logic
+    setTimeout(() => (this.isRetrying = false), 2000)
+    this.isRetrying = !this.isRetrying
+  }
+
+  @State() isDisliked = false
+  handleDislikeMessage = () => {
+    // todo: replace with actual dislike logic
+    this.isDisliked = !this.isDisliked
+  }
+
   render() {
     return (
       <Host>
         <div class="message-wrapper">
           <orama-markdown content={this.message.content} />
           <div class="message-actions">
-            <orama-button type="button" variant="icon">
-              {/* TODO: We need a feedback for copy to clipboard action  */}
-              <ph-copy
-                onClick={() => copyToClipboard(this.message.content)}
-                onKeyDown={() => copyToClipboard(this.message.content)}
-              />
+            <orama-button
+              type="button"
+              variant="icon"
+              onClick={this.handleCopyToClipboard}
+              onKeyDown={this.handleCopyToClipboard}
+              withTooltip={this.isCopied ? 'Copied!' : undefined}
+            >
+              <ph-copy />
             </orama-button>
-            <orama-button type="button" variant="icon">
-              <ph-arrows-clockwise />
+            <orama-button
+              type="button"
+              variant="icon"
+              onClick={this.handleRetryMessage}
+              onKeyDown={this.handleRetryMessage}
+            >
+              <span class={this.isRetrying ? 'retrying' : ''}>
+                {this.isRetrying ? <ph-arrows-clockwise weight="fill" /> : <ph-arrows-clockwise />}
+              </span>
             </orama-button>
-            <orama-button type="button" variant="icon">
-              <ph-thumbs-down />
+            <orama-button
+              type="button"
+              variant="icon"
+              onClick={this.handleDislikeMessage}
+              onKeyDown={this.handleDislikeMessage}
+            >
+              {this.isDisliked ? <ph-thumbs-down weight="fill" /> : <ph-thumbs-down />}
             </orama-button>
           </div>
         </div>

diff --git a/packages/ui-stencil/src/utils/utils.ts b/packages/ui-stencil/src/utils/utils.ts
@@ -1,4 +1,4 @@
-import { CloudIndexConfig } from '@/types'
+import type { CloudIndexConfig } from '@/types'
 import { OramaClient } from '@oramacloud/client'
 
 export function format(first: string, middle: string, last: string): string {