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 4 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
7 changes: 6 additions & 1 deletion packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,12 @@ export class ChatBox {
return (
// * Note: only dark theme supported at the moment
<Host id="orama-ui-chatbox" class="theme-dark">
<orama-chat placeholder={this.placeholder} sourceBaseUrl={this.sourceBaseUrl} sourcesMap={this.sourcesMap} />
<orama-chat
placeholder={this.placeholder}
sourceBaseUrl={this.sourceBaseUrl}
sourcesMap={this.sourcesMap}
style={{ minHeight: '400px' }}
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this to address the request about having the answers/clear chat fixed on top? If so, I'm trying a different solution (I explained on Figma). If it works, it should be safer for general component purposes.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This thing was a mistake hahaha
I just added to test the behavior of the container without needing to make questions.

I should remove it :D

/>
</Host>
)
}
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
27 changes: 15 additions & 12 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 @@ -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) => {
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

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 = () => {
Expand Down
Loading