Skip to content

Commit

Permalink
Merge pull request #20 from askorama/uiRequests
Browse files Browse the repository at this point in the history 
UI requests
  • Loading branch information
@rjborba
rjborba authored Jul 31, 2024
2 parents 23280d8 + c564ff7 commit 115a568
Show file tree
Hide file tree
Showing 10 changed files with 29 additions and 10 deletions.
4 changes: 3 additions & 1 deletion ...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
View file
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
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
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
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
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
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
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
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
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
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) => {
Expand Down

0 comments on commit 115a568

Please sign in to comment.