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) => {