Merge pull request #32 from askorama/feature/orm-1623-2

Feature/orm-1623-2
oramasearch · Aug 21, 2024 · a6bd7d8 · a6bd7d8
2 parents b4d8620 + d5e119f
commit a6bd7d8
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 19 deletions.
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
@@ -53,25 +53,69 @@
   }
 }
 
+.source-next {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.carousel-arrow {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 0;
+  bottom: 0;
+  margin-block: auto;
+  height: fit-content;
+  width: 48px;
+  background-color: white;
+  border: none;
+  font-size: 3rem;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 100ms;
+  z-index: 1;
+}
+
+.carousel-arrow:hover,
+.carousel-arrow:focus {
+  opacity: 1;
+}
+
+.carousel-arrow--prev {
+  left: 0;
+}
+
+.carousel-arrow--next {
+  right: 0;
+}
+
 .sources-wrapper {
   display: flex;
-  gap: var(--spacing-s, $spacing-s);
   overflow-x: auto;
   scrollbar-width: none;
   position: relative;
+
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
 }
 
 .source {
   position: relative;
   overflow: hidden;
   width: pxToRem(195);
+  margin-right: var(--spacing-s, $spacing-s);
   flex-grow: 0;
   flex-shrink: 0;
   text-decoration: none;
   padding: var(--spacing-m, $spacing-m);
   border-radius: var(--radius-s, $radius-s);
   background: var(--background-color-secondary, background-color('secondary'));
   transition: background 0.2s ease-in-out;
+  scroll-snap-align: start;
 
   .source-title,
   .source-subtitle {
@@ -80,6 +124,10 @@
     text-overflow: ellipsis;
   }
 
+  &:last-of-type {
+    margin-right: var(--spacing-l, $spacing-l);
+  }
+
   @media (hover: hover) {
     &:hover {
       background: var(--background-color-tertiary, background-color('tertiary'));

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, State, h } from '@stencil/core'
+import { Component, Host, Prop, State, h, Listen, Watch } from '@stencil/core'
 import type { TChatInteraction } from '@/context/chatContext'
 import '@phosphor-icons/webcomponents/dist/icons/PhCopy.mjs'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowsClockwise.mjs'
@@ -14,6 +14,10 @@ import { copyToClipboard } from '@/utils/utils'
 })
 export class OramaChatAssistentMessage {
   @Prop() interaction: TChatInteraction
+  @State() carouselEnd = false
+  @State() carouselStart = true
+
+  carouselSourceRef!: HTMLElement
 
   @State() isCopied = false
   handleCopyToClipboard = () => {
@@ -22,16 +26,38 @@ export class OramaChatAssistentMessage {
     copyToClipboard(this.interaction.response)
   }
 
-  handleRetryMessage = () => {
-    chatContext.chatService?.regenerateLatest()
-  }
-
   @State() isDisliked = false
   handleDislikeMessage = () => {
     // todo: replace with actual dislike logic
     this.isDisliked = !this.isDisliked
   }
 
+  private handleRetryMessage = () => {
+    chatContext.chatService?.regenerateLatest()
+  }
+
+  private handleCarouselMove(next = true) {
+    const carousel = this.carouselSourceRef
+    const slide = carousel.querySelector('.source')
+    const slideWidth = slide.clientWidth
+    const slideMargin = Number.parseInt(window.getComputedStyle(slide).marginRight, 10)
+    const slideTotalWidth = slideWidth + slideMargin
+    carousel.scrollLeft = carousel.scrollLeft + (next ? slideTotalWidth : -slideTotalWidth)
+
+    // TO be fixed
+    if (next) {
+      if (this.carouselEnd) return
+      this.carouselStart = false
+      this.carouselEnd =
+        Number.parseInt(carousel.scrollLeft + slideTotalWidth.toString()) ===
+        carousel.scrollWidth - carousel.offsetWidth
+    } else {
+      if (this.carouselStart) return
+      this.carouselStart = carousel.scrollLeft - slideTotalWidth === 0
+      this.carouselEnd = false
+    }
+  }
+
   render() {
     if (this.interaction.status === 'loading') {
       return (
@@ -51,16 +77,36 @@ export class OramaChatAssistentMessage {
       )
     }
 
-    if (!this.interaction.response) {
+    if (!this.interaction.sources?.length) {
       return
     }
 
     return (
       <Host>
         {!!this.interaction.sources?.length && (
+          // TODO: move this to a separate component orama-sources
           <div class="sources-outer-wrapper">
-            <div class="sources-wrapper">
-              <h2 class="sr-only">Sources</h2>
+            <h2 class="sr-only">Sources</h2>
+            {/* {!this.carouselStart && (
+              <button
+                class="carousel-arrow carousel-arrow--prev"
+                onClick={() => this.handleCarouselMove(false)}
+                type="button"
+              >
+                &#8249;
+              </button>
+            )}
+
+            {!this.carouselEnd && (
+              <button
+                class="carousel-arrow carousel-arrow--next"
+                onClick={() => this.handleCarouselMove(true)}
+                type="button"
+              >
+                &#8250;
+              </button>
+            )} */}
+            <div class="sources-wrapper" ref={(el) => (this.carouselSourceRef = el)}>
               {this.interaction.sources.map((source, index) => (
                 <a
                   href={`${chatContext.sourceBaseURL}${source[chatContext.sourcesMap.path]}`}
@@ -69,6 +115,7 @@ export class OramaChatAssistentMessage {
                   key={`source-${index}`}
                   target="_blank"
                   rel="noopener noreferrer"
+                  id={`source-${index}`}
                 >
                   <orama-text as="h3" styledAs="span" class="source-title">
                     {source[chatContext.sourcesMap.title]}
@@ -82,7 +129,7 @@ export class OramaChatAssistentMessage {
           </div>
         )}
         <div class="message-wrapper">
-          <orama-markdown content={this.interaction.response} />
+          {!this.interaction.response ? <orama-dots-loader /> : <orama-markdown content={this.interaction.response} />}
 
           <div class={{ 'message-actions': true, hidden: this.interaction.status !== TAnswerStatus.done }}>
             {this.interaction.latest && (

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md
@@ -14,7 +14,7 @@
 | `placeholder`   | `placeholder`     |             | `string`                                                   | `'Ask me anything'` |
 | `showClearChat` | `show-clear-chat` |             | `boolean`                                                  | `true`              |
 | `sourceBaseUrl` | `source-base-url` |             | `string`                                                   | `''`                |
-| `sourcesMap`    | --                |             | `{ title?: string; description?: string; path?: string; }` | `undefined`         |
+| `sourcesMap`    | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined`         |
 | `suggestions`   | --                |             | `string[]`                                                 | `undefined`         |
 
 

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -13,7 +13,7 @@
 | `index`          | --                |             | `{ api_key: string; endpoint: string; }`                   | `undefined` |
 | `placeholder`    | `placeholder`     |             | `string`                                                   | `undefined` |
 | `sourceBaseUrl`  | `source-base-url` |             | `string`                                                   | `undefined` |
-| `sourcesMap`     | --                |             | `{ title?: string; description?: string; path?: string; }` | `undefined` |
+| `sourcesMap`     | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined` |
 | `suggestions`    | --                |             | `string[]`                                                 | `undefined` |