Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI requests #20

Merged
merged 5 commits into from
Jul 31, 2024
Merged

UI requests #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aee1477
chore: display initial suggestions on bottom
rjborba Jul 31, 2024
e09af43
chore: adjust loading icon
rjborba Jul 31, 2024
bd45450
fix: show stop button even on Stream state
rjborba Jul 31, 2024
dd09fa7
fix: Remove padding for the first Markdown element
rjborba Jul 31, 2024
c564ff7
fix: removing unecessary min-height of chat
rjborba Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions ...a-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions ...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export class OramaMarkdown {
href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
/>
<div
class="orama-markdown-wrapper"
ref={(ref) => {
this.divElement = ref
}}
Expand Down
8 changes: 8 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -161,7 +160,9 @@ export class OramaChat {

{/* TODO: Provide a better animation */}
{!chatContext.interactions?.length ? (
<orama-chat-suggestions suggestions={SUGGESTIONS} suggestionClicked={this.handleSuggestionClick} />
<div class="suggestions-wrapper">
<orama-chat-suggestions suggestions={SUGGESTIONS} suggestionClicked={this.handleSuggestionClick} />
</div>
) : null}
{/* TODO: not required for chatbox, but maybe required for Searchbox v2 */}
{/* <orama-logo-icon /> */}
Expand Down Expand Up @@ -200,7 +201,7 @@ export class OramaChat {
placeholder={this.placeholder}
>
<div slot="adornment-end">
{lastInteractionStreaming ? (
{[TAnswerStatus.streaming, TAnswerStatus.loading].includes(lastInteractionStatus) ? (
<orama-button
type="submit"
onClick={this.handleAbortAnswerClick}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-stencil/src/components/internal/orama-chat/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-stencil/src/components/orama-chat-box/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-stencil/src/components/orama-search-box/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
| `facetProperty` | `facet-property` | | `string` | `undefined` |
| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` |
| `open` | `open` | | `boolean` | `false` |
| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` |
| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` |
| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; 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` |


Expand Down
1 change: 1 addition & 0 deletions packages/ui-stencil/src/services/ChatService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rjborba not sure about this deletion here

Expand Down
Loading