Feature/orm-1550

apps/storybook/stories/public/orama-chat-box.stories.tsx

@@ -3,8 +3,8 @@ import type { Components } from '@orama/wc-components'
 
 const demoIndexes = {
   orama: {
-    api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
-    endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
+    api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
+    endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
   },
   recipes: {
     api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
@@ -32,10 +32,11 @@ type Story = StoryObj<Components.OramaChatBox>
 
 export const ChatBox: Story = {
   args: {
+    placeholder: 'What do you want to learn about Orama?',
+    sourceBaseURL: 'https://docs.orama.com',
     index: {
       api_key: demoIndexes.orama.api_key,
       endpoint: demoIndexes.orama.endpoint,
     },
-    placeholder: 'What do you want to learn about Orama?',
   },
 }

packages/ui-stencil-vue/lib/components.ts

@@ -19,7 +19,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
 
 
 export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-chat', undefined, [
-  'placeholder'
+  'placeholder',
+  'sourceBaseURL'
 ]);
 
 
@@ -30,6 +31,7 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer<JSX.Orama
 
 export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('orama-chat-box', undefined, [
   'index',
+  'sourceBaseURL',
   'placeholder'
 ]);
 

packages/ui-stencil/src/components.d.ts

@@ -32,13 +32,15 @@ export namespace Components {
     }
     interface OramaChat {
         "placeholder"?: string;
+        "sourceBaseURL"?: string;
     }
     interface OramaChatAssistentMessage {
         "interaction": TChatInteraction;
     }
     interface OramaChatBox {
         "index": CloudIndexConfig;
         "placeholder"?: any;
+        "sourceBaseURL"?: any;
     }
     interface OramaChatMessagesContainer {
         "interactions": TChatInteraction[];
@@ -310,13 +312,15 @@ declare namespace LocalJSX {
     }
     interface OramaChat {
         "placeholder"?: string;
+        "sourceBaseURL"?: string;
     }
     interface OramaChatAssistentMessage {
         "interaction"?: TChatInteraction;
     }
     interface OramaChatBox {
         "index"?: CloudIndexConfig;
         "placeholder"?: any;
+        "sourceBaseURL"?: any;
     }
     interface OramaChatMessagesContainer {
         "interactions"?: TChatInteraction[];

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx

@@ -61,8 +61,14 @@ export class OramaChatAssistentMessage {
           <div class="sources-wrapper">
             <h2 class="sr-only">Sources</h2>
             {this.interaction.sources.map((source, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <a href={source.path} class="source" key={`source-${index}`} target="_blank" rel="noopener noreferrer">
+              <a
+                href={`${chatContext.sourceBaseURL}${source.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.title}
                 </orama-text>

packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx

@@ -24,7 +24,10 @@ export class OramaChatMessagesContainer {
               <orama-chat-assistent-message interaction={{ ...interaction }} />
               {interaction.latest && interaction.status === 'done' && interaction.relatedQueries?.length && (
                 <div class="suggestions-wrapper">
-                  <orama-chat-suggestions suggestions={interaction.relatedQueries} suggestionClicked={() => null} />
+                  <orama-chat-suggestions
+                    suggestions={interaction.relatedQueries}
+                    suggestionClicked={this.onSuggestionClick}
+                  />
                 </div>
               )}
             </div>

packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss

@@ -4,7 +4,6 @@
 
 .suggestions-list {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-m, $spacing-m);
   padding: var(--radius-s, $spacing-s) var(--radius-l, $spacing-l);
@@ -22,6 +21,7 @@
 
   @media (--sm-min) {
     justify-content: center;
+    flex-wrap: wrap;
   }
 }
 

packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx

@@ -19,6 +19,7 @@ const BOTTOM_THRESHOLD = 1
 })
 export class OramaChat {
   @Prop() placeholder?: string = 'Ask me anything'
+  @Prop() sourceBaseURL?: string = ''
   @State() inputValue = ''
   messagesContainerRef!: HTMLElement
   isScrolling = false
@@ -96,6 +97,7 @@ export class OramaChat {
   componentDidLoad() {
     this.messagesContainerRef.addEventListener('wheel', this.handleWheel)
     this.recalculateLockOnBottom()
+    chatContext.sourceBaseURL = this.sourceBaseURL
   }
 
   handleSubmit = (e: Event) => {
@@ -201,7 +203,7 @@ export class OramaChat {
             </div>
           </form>
           <orama-text as="p" styledAs="small" align="center">
-            Orama can make mistakes. Lorem ipsum dolor sit amet
+            Orama can make mistakes. Please verify the information.
           </orama-text>
         </div>
       </Host>

packages/ui-stencil/src/components/internal/orama-chat/readme.md

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property      | Attribute     | Description | Type     | Default             |
-| ------------- | ------------- | ----------- | -------- | ------------------- |
-| `placeholder` | `placeholder` |             | `string` | `'Ask me anything'` |
+| Property        | Attribute           | Description | Type     | Default             |
+| --------------- | ------------------- | ----------- | -------- | ------------------- |
+| `placeholder`   | `placeholder`       |             | `string` | `'Ask me anything'` |
+| `sourceBaseURL` | `source-base-u-r-l` |             | `string` | `''`                |
 
 
 ## Dependencies

packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss

@@ -6,7 +6,11 @@ orama-textarea {
   border: 1px solid var(--border-color-primary, border-color('primary'));
   background: var(--background-color-secondary, background-color('secondary'));
   box-shadow: 0px 4px 24px 0px var(--textarea-shadow-color, white);
-  padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
+  padding: var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
+
+  @media (--sm-min) {
+    padding: var(--spacing-m, $spacing-m);
+  }
 }
 
 ::slotted([slot='adornment-start']) {
@@ -37,13 +41,21 @@ textarea {
   font-family: inherit;
   color: var(--text-color-primary, text-color('primary'));
   width: 100%;
-  padding: var(--spacing-s, $spacing-s) 0;
+  padding: 0;
   font-size: var(--font-size-sm, $font-size-sm);
 
   transition: height 0.1s;
 
+  @media (--sm-min) {
+    padding: var(--spacing-s, $spacing-s) 0;
+  }
+
   &::placeholder {
     color: var(--text-color-inactive, text-color('inactive'));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 95%;
   }
 
   &:focus {

packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.scss

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  max-height: 400px;
+  // todo: this is probabily to fix, since now it's not meant for generic purpose, but to be used in orama website
+  max-height: pxToRem(613);
 }
 
 .header {

packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx

@@ -12,6 +12,7 @@ import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
 })
 export class ChatBox {
   @Prop() index: CloudIndexConfig
+  @Prop() sourceBaseURL?
   @Prop() placeholder?
 
   @Watch('cloudIndex')
@@ -43,7 +44,7 @@ export class ChatBox {
             <ph-arrow-clockwise weight="fill" size="14" /> Clear chat
           </button>
         </div>
-        <orama-chat placeholder={this.placeholder} />
+        <orama-chat placeholder={this.placeholder} sourceBaseURL={this.sourceBaseURL} />
       </Host>
     )
   }

packages/ui-stencil/src/components/orama-chat-box/readme.md

@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property      | Attribute     | Description | Type                                     | Default     |
-| ------------- | ------------- | ----------- | ---------------------------------------- | ----------- |
-| `index`       | --            |             | `{ api_key: string; endpoint: string; }` | `undefined` |
-| `placeholder` | `placeholder` |             | `any`                                    | `undefined` |
+| Property        | Attribute           | Description | Type                                     | Default     |
+| --------------- | ------------------- | ----------- | ---------------------------------------- | ----------- |
+| `index`         | --                  |             | `{ api_key: string; endpoint: string; }` | `undefined` |
+| `placeholder`   | `placeholder`       |             | `any`                                    | `undefined` |
+| `sourceBaseURL` | `source-base-u-r-l` |             | `any`                                    | `undefined` |
 
 
 ## Dependencies

packages/ui-stencil/src/context/chatContext.ts

@@ -36,6 +36,7 @@ export type TChatInteraction = {
 const { state: chatContext, ...chatStore } = createStore({
   chatService: null as ChatService | null,
   interactions: [] as TChatInteraction[],
+  sourceBaseURL: '' as string,
   lockScrollOnBottom: true as boolean,
 })
 

packages/ui-stencil/src/services/ChatService.ts

@@ -54,6 +54,7 @@ export class ChatService {
                   response,
                   sources,
                   interactionId: latestState.interactionId,
+                  relatedQueries: latestState.relatedQueries,
                   status: answerStatus,
                   latest: true,
                 }