Merge pull request #31 from askorama/feature/orm-1623

Feature/orm-1623
oramasearch · Aug 19, 2024 · 20180b3 · 20180b3
2 parents 61ec994 + a1512b2
commit 20180b3
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 50 deletions.
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -96,7 +96,7 @@ export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-i
   'labelForScreenReaders',
   'defaultValue',
   'autoFocus',
-  'oramaInputChanged'
+  'resetValue'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -273,7 +273,7 @@ declare global {
         new (): HTMLOramaFooterElement;
     };
     interface HTMLOramaInputElementEventMap {
-        "oramaInputChanged": string;
+        "resetValue": void;
     }
     interface HTMLOramaInputElement extends Components.OramaInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaInputElementEventMap>(type: K, listener: (this: HTMLOramaInputElement, ev: OramaInputCustomEvent<HTMLOramaInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -488,7 +488,7 @@ declare namespace LocalJSX {
         "label"?: InputProps['label'];
         "labelForScreenReaders"?: InputProps['labelForScreenReaders'];
         "name"?: InputProps['name'];
-        "onOramaInputChanged"?: (event: OramaInputCustomEvent<string>) => void;
+        "onResetValue"?: (event: OramaInputCustomEvent<void>) => void;
         "placeholder"?: InputProps['placeholder'];
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];

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
@@ -36,13 +36,29 @@
   pointer-events: none;
 }
 
+.sources-outer-wrapper {
+  overflow: hidden;
+  position: relative;
+  margin: 0 var(--spacing-s, $spacing-s) var(--spacing-m, $spacing-m) var(--spacing-l, $spacing-l);
+
+  &::after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 20%;
+    background: linear-gradient(90deg, transparent 50%, var(--background-color-primary, background-color('primary')) 100%);
+  }
+}
+
 .sources-wrapper {
   display: flex;
-  margin-bottom: var(--spacing-s, $spacing-s);
-  padding: 0 var(--spacing-l, $spacing-l);
   gap: var(--spacing-s, $spacing-s);
   overflow-x: auto;
   scrollbar-width: none;
+  position: relative;
 }
 
 .source {
@@ -52,26 +68,22 @@
   flex-grow: 0;
   flex-shrink: 0;
   text-decoration: none;
-
-  & ::after {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, transparent 70%, var(--background-color-secondary, background-color('secondary')) 95%);
-  }
-
   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;
 
-  .source-title {
+  .source-title,
+  .source-subtitle {
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .source-subtitle {
-    color: var(--text-color-tertiary, text-color('tertiary'));
-    white-space: nowrap;
+  @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
@@ -58,25 +58,27 @@ export class OramaChatAssistentMessage {
     return (
       <Host>
         {!!this.interaction.sources?.length && (
-          <div class="sources-wrapper">
-            <h2 class="sr-only">Sources</h2>
-            {this.interaction.sources.map((source, index) => (
-              <a
-                href={`${chatContext.sourceBaseURL}${source[chatContext.sourcesMap.path]}`}
-                class="source"
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                key={`source-${index}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <orama-text as="h3" styledAs="span" class="source-title">
-                  {source[chatContext.sourcesMap.title]}
-                </orama-text>
-                <orama-text as="p" styledAs="span" class="source-subtitle">
-                  {source[chatContext.sourcesMap.description]}
-                </orama-text>
-              </a>
-            ))}
+          <div class="sources-outer-wrapper">
+            <div class="sources-wrapper">
+              <h2 class="sr-only">Sources</h2>
+              {this.interaction.sources.map((source, index) => (
+                <a
+                  href={`${chatContext.sourceBaseURL}${source[chatContext.sourcesMap.path]}`}
+                  class="source"
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  key={`source-${index}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <orama-text as="h3" styledAs="span" class="source-title">
+                    {source[chatContext.sourcesMap.title]}
+                  </orama-text>
+                  <orama-text as="p" styledAs="span" class="source-subtitle" variant="tertiary">
+                    {source[chatContext.sourcesMap.description]}
+                  </orama-text>
+                </a>
+              ))}
+            </div>
           </div>
         )}
         <div class="message-wrapper">

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
@@ -2,9 +2,8 @@ import { Component, Host, Prop, State, Watch, h } from '@stencil/core'
 import { chatContext, TAnswerStatus } from '@/context/chatContext'
 import type { SourcesMap } from '@/types'
 import '@phosphor-icons/webcomponents/dist/icons/PhPaperPlaneTilt.mjs'
-import '@phosphor-icons/webcomponents/dist/icons/PhStop.mjs'
+import '@phosphor-icons/webcomponents/dist/icons/PhStopCircle.mjs'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowDown.mjs'
-import { globalContext } from '@/context/GlobalContext'
 
 const BOTTOM_THRESHOLD = 1
 
@@ -238,7 +237,7 @@ export class OramaChat {
                       onKeyDown={this.handleAbortAnswerClick}
                       aria-label="Abort answer"
                     >
-                      <ph-stop size={16} />
+                      <ph-stop-circle size={16} />
                     </orama-button>
                   ) : (
                     <orama-button

diff --git a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss
@@ -3,7 +3,6 @@
   align-items: center;
   padding: var(--spacing-m, $spacing-m);
   justify-content: space-between;
-  background-color: var(--background-color-primary, background-color('primary'));
   border-radius: 0 0 var(--radius-m, $radius-m) var(--radius-m, $radius-m);
   border-top: 1px solid var(--border-color-primary, border-color('primary'));
 }