From aee1477173e5fd37d5451345b472a67b3059ffa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Tue, 30 Jul 2024 23:07:47 -0300 Subject: [PATCH 1/5] chore: display initial suggestions on bottom --- .../src/components/internal/orama-chat/orama-chat.scss | 8 ++++++++ .../src/components/internal/orama-chat/orama-chat.tsx | 4 +++- .../src/components/internal/orama-chat/readme.md | 2 +- .../src/components/orama-chat-box/orama-chat-box.tsx | 7 ++++++- .../ui-stencil/src/components/orama-chat-box/readme.md | 2 +- 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss index 5614fcb6..c512271f 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss @@ -72,6 +72,14 @@ orama-chat { margin-bottom: var(--spacing-s, $spacing-s); } +.suggestions-wrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: end; + overflow-x: auto; +} + orama-logo-icon { z-index: -1; position: absolute; 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 index 445804a4..88ffe5c5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -161,7 +161,9 @@ export class OramaChat { {/* TODO: Provide a better animation */} {!chatContext.interactions?.length ? ( - +
+ +
) : null} {/* TODO: not required for chatbox, but maybe required for Searchbox v2 */} {/* */} diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index 5cb696c5..df6495b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -12,7 +12,7 @@ | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx index aa9bd20f..ecc3873d 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx +++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx @@ -38,7 +38,12 @@ export class ChatBox { return ( // * Note: only dark theme supported at the moment - + ) } diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index eaafcc60..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies From e09af437f913ffde518553944e49254c41ab513b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Tue, 30 Jul 2024 23:26:59 -0300 Subject: [PATCH 2/5] chore: adjust loading icon --- .../internal/orama-dots-loader/orama-dots-loader.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss index 12cf26de..bb5a2795 100644 --- a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss +++ b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss @@ -2,12 +2,13 @@ display: inline-flex; align-items: center; justify-content: center; + padding: var(--spacing-l, $spacing-l) 0; } .dot { - width: pxToRem(6); - height: pxToRem(6); - margin: 0 var(--spacing-xs, $spacing-xs); + width: pxToRem(4); + height: pxToRem(4); + margin: 0 var(--spacing-2xs, $spacing-2xs); background-color: var(--text-color-primary, text-color(primary)); border-radius: 50%; animation: dot-slide-up 1.4s infinite both; From bd454504ee3c1f89030f9bcb60aa1947fdf1707f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Tue, 30 Jul 2024 23:51:18 -0300 Subject: [PATCH 3/5] fix: show stop button even on Stream state --- .../orama-chat-assistent-message.scss | 1 - .../internal/orama-chat/orama-chat.tsx | 3 +-- .../src/components/orama-search-box/readme.md | 2 +- .../ui-stencil/src/services/ChatService.ts | 27 ++++++++++--------- 4 files changed, 17 insertions(+), 16 deletions(-) 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 f84b6824..221fc001 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 @@ -25,7 +25,6 @@ .message-actions { display: flex; - margin-top: var(--spacing-m, $spacing-m); gap: var(--spacing-s, $spacing-s); justify-content: end; transition: opacity 0.2s ease-in-out; 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 index 88ffe5c5..033e971d 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -136,7 +136,6 @@ export class OramaChat { render() { const lastInteraction = chatContext.interactions?.[chatContext.interactions.length - 1] const lastInteractionStatus = lastInteraction?.status - const lastInteractionStreaming = lastInteractionStatus === TAnswerStatus.streaming // ? Question: Maybe should be a orama-button variant? return ( @@ -202,7 +201,7 @@ export class OramaChat { placeholder={this.placeholder} >
- {lastInteractionStreaming ? ( + {[TAnswerStatus.streaming, TAnswerStatus.loading].includes(lastInteractionStatus) ? ( ; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-inactive": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-background-color-primary": string; }; }>; }` | `undefined` | diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index edbeabfd..1fa04a20 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -50,18 +50,21 @@ export class ChatService { } // TODO: WE may want to reveive ask props as a Service prop instead of enforcing it here - return this.answerSession.ask({ term: term, related: { howMany: 3, format: 'question' } }).catch((error) => { - chatContext.interactions = chatContext.interactions.map((interaction, index) => { - if (index === chatContext.interactions.length - 1) { - return { - ...interaction, - status: TAnswerStatus.error, - } - } - return interaction - }) - console.error(error) - }) + return this.answerSession.ask({ term: term, related: { howMany: 3, format: 'question' } }) + + // TODO: ABORT/ERROR/STOP should emmit onStateChange event. Keeping the lines below as a reference + // .catch((error) => { + // chatContext.interactions = chatContext.interactions.map((interaction, index) => { + // if (index === chatContext.interactions.length - 1) { + // return { + // ...interaction, + // status: TAnswerStatus.error, + // } + // } + // return interaction + // }) + // console.error(error) + // }) } abortAnswer = () => { From dd09fa76a2bd6578450a3fc458beaccac4635227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Tue, 30 Jul 2024 23:51:50 -0300 Subject: [PATCH 4/5] fix: Remove padding for the first Markdown element --- .../orama-chat-assistent-message.scss | 3 +++ .../orama-markdown/orama-markdown.scss | 5 +++++ .../orama-markdown/orama-markdown.tsx | 1 + 3 files changed, 9 insertions(+) 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 221fc001..2841ac52 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 @@ -4,6 +4,9 @@ } .message-wrapper { + display: flex; + flex-direction: column; + gap: var(--spacing-m, $spacing-m); background: var(--background-color-secondary, background-color('secondary')); border-radius: var(--radius-m, $radius-m); padding: var(--spacing-m, $spacing-m); diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss index a98f5d75..bc97ccc6 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss @@ -2,6 +2,11 @@ color: var(--text-color-secondary, text-color('secondary')); } +.orama-markdown-wrapper > :first-child { + padding-top: 0; + margin-top: 0; +} + p, a, li { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx index d9bf35b3..93719ac5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx @@ -183,6 +183,7 @@ export class OramaMarkdown { href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/styles/atom-one-dark.min.css" />
{ this.divElement = ref }} From c564ff7c9937240bc5b06fa40f4d319ec0c2ac23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Wed, 31 Jul 2024 10:15:55 -0300 Subject: [PATCH 5/5] fix: removing unecessary min-height of chat --- .../orama-chat-box/orama-chat-box.tsx | 7 +---- .../ui-stencil/src/services/ChatService.ts | 28 +++++++++---------- 2 files changed, 14 insertions(+), 21 deletions(-) diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx index ecc3873d..aa9bd20f 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx +++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx @@ -38,12 +38,7 @@ export class ChatBox { return ( // * Note: only dark theme supported at the moment - + ) } diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index 1fa04a20..c4e6bfc2 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -49,22 +49,20 @@ export class ChatService { }) } - // TODO: WE may want to reveive ask props as a Service prop instead of enforcing it here - return this.answerSession.ask({ term: term, related: { howMany: 3, format: 'question' } }) - // TODO: ABORT/ERROR/STOP should emmit onStateChange event. Keeping the lines below as a reference - // .catch((error) => { - // chatContext.interactions = chatContext.interactions.map((interaction, index) => { - // if (index === chatContext.interactions.length - 1) { - // return { - // ...interaction, - // status: TAnswerStatus.error, - // } - // } - // return interaction - // }) - // console.error(error) - // }) + // TODO: WE may want to reveive ask props as a Service prop instead of enforcing it here + return this.answerSession.ask({ term: term, related: { howMany: 3, format: 'question' } }).catch((error) => { + chatContext.interactions = chatContext.interactions.map((interaction, index) => { + if (index === chatContext.interactions.length - 1) { + return { + ...interaction, + status: TAnswerStatus.error, + } + } + return interaction + }) + console.error(error) + }) } abortAnswer = () => {