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..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);
@@ -25,7 +28,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-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
}}
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..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 (
@@ -161,7 +160,9 @@ export class OramaChat {
{/* TODO: Provide a better animation */}
{!chatContext.interactions?.length ? (
-
+
+
+
) : null}
{/* TODO: not required for chatbox, but maybe required for Searchbox v2 */}
{/*
*/}
@@ -200,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..c4e6bfc2 100644
--- a/packages/ui-stencil/src/services/ChatService.ts
+++ b/packages/ui-stencil/src/services/ChatService.ts
@@ -49,6 +49,7 @@ export class ChatService {
})
}
+ // TODO: ABORT/ERROR/STOP should emmit onStateChange event. Keeping the lines below as a reference
// 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) => {