From 231515154faa5335f22370dc701e3575e20bcbca Mon Sep 17 00:00:00 2001
From: Fausto Quaggia <fausto.quaggia@gmail.com>
Date: Mon, 22 Jul 2024 22:10:34 +0200
Subject: [PATCH 1/3] feat: chat message actions

---
 .../internal/orama-button/orama-button.scss   |  1 +
 .../orama-chat-assistent-message.scss         | 39 +++++++++++++
 .../orama-chat-assistent-message.tsx          | 55 +++++++++++++++----
 packages/ui-stencil/src/utils/utils.ts        |  2 +-
 4 files changed, 85 insertions(+), 12 deletions(-)

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
index 279ca679..828da1b7 100644
--- 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;
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 b7b97e84..96a3f1aa 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
@@ -59,3 +59,42 @@ 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);
+  }
+}
+
+.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;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
index 0b75122e..59883050 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-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,57 @@ 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 = () => {
+    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}
+            >
+              {this.isCopied ? <ph-copy weight="fill" /> : <ph-copy />}
+              {this.isCopied && <span class="tooltip">Copied!</span>}
             </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
index 29a5eda2..f0d7541c 100644
--- 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 {

From c77425351c48dc18b3b51faa09028cb6ef46a170 Mon Sep 17 00:00:00 2001
From: Fausto Quaggia <fausto.quaggia@gmail.com>
Date: Mon, 22 Jul 2024 22:12:06 +0200
Subject: [PATCH 2/3] chore: add todo comment

---
 .../orama-chat-assistent-message.tsx                             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
index 59883050..545a920c 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -29,6 +29,7 @@ export class OramaChatAssistentMessage {
 
   @State() isDisliked = false
   handleDislikeMessage = () => {
+    // todo: replace with actual dislike logic
     this.isDisliked = !this.isDisliked
   }
 

From 00f3d5221cd363428fd6a7bf5a77a6e03d906c47 Mon Sep 17 00:00:00 2001
From: Fausto Quaggia <fausto.quaggia@gmail.com>
Date: Mon, 22 Jul 2024 22:24:55 +0200
Subject: [PATCH 3/3] feat: button tooltip

---
 packages/ui-stencil-vue/lib/components.ts     |  3 ++-
 packages/ui-stencil/src/components.d.ts       |  2 ++
 .../internal/orama-button/orama-button.scss   | 27 ++++++++++++++++++-
 .../internal/orama-button/orama-button.tsx    |  2 ++
 .../internal/orama-button/readme.md           | 15 ++++++-----
 .../orama-chat-assistent-message.scss         | 26 ------------------
 .../orama-chat-assistent-message.tsx          |  4 +--
 7 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
index 848024f5..03981f9d 100644
--- 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
index d3a0be8e..7ecf6ff3 100644
--- 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
index 828da1b7..9f99aaa4 100644
--- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
+++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -9,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 {
@@ -51,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
index 6cb91091..ad23d962 100644
--- 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
index 613a099c..8d446c5e 100644
--- 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/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 96a3f1aa..404ae727 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
@@ -72,29 +72,3 @@ orama-chat-assistent-message {
     transform: rotate(360deg);
   }
 }
-
-.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;
-}
-
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
index 545a920c..28238014 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -44,9 +44,9 @@ export class OramaChatAssistentMessage {
               variant="icon"
               onClick={this.handleCopyToClipboard}
               onKeyDown={this.handleCopyToClipboard}
+              withTooltip={this.isCopied ? 'Copied!' : undefined}
             >
-              {this.isCopied ? <ph-copy weight="fill" /> : <ph-copy />}
-              {this.isCopied && <span class="tooltip">Copied!</span>}
+              <ph-copy />
             </orama-button>
             <orama-button
               type="button"