Skip to content

Commit

Permalink
feat: add dots loader
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-francesca
g-francesca committed Jul 22, 2024
1 parent cb63f53 commit a8930ab
Show file tree
Hide file tree
Showing 18 changed files with 131 additions and 15 deletions.
1 change: 1 addition & 0 deletions packages/ui-stencil-react/src/components/stencil-generated/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const OramaChatBox = /*@__PURE__*/createReactComponent<JSX.OramaChatBox,
export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.OramaChatMessagesContainer, HTMLOramaChatMessagesContainerElement>('orama-chat-messages-container');
export const OramaChatSuggestions = /*@__PURE__*/createReactComponent<JSX.OramaChatSuggestions, HTMLOramaChatSuggestionsElement>('orama-chat-suggestions');
export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
export const OramaDotsLoader = /*@__PURE__*/createReactComponent<JSX.OramaDotsLoader, HTMLOramaDotsLoaderElement>('orama-dots-loader');
export const OramaFacets = /*@__PURE__*/createReactComponent<JSX.OramaFacets, HTMLOramaFacetsElement>('orama-facets');
export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
export const OramaLogoIcon = /*@__PURE__*/createReactComponent<JSX.OramaLogoIcon, HTMLOramaLogoIconElement>('orama-logo-icon');
Expand Down
3 changes: 3 additions & 0 deletions packages/ui-stencil-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
]);


export const OramaDotsLoader = /*@__PURE__*/ defineContainer<JSX.OramaDotsLoader>('orama-dots-loader', undefined);


export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
'facets',
'selectedFacet',
Expand Down
17 changes: 15 additions & 2 deletions packages/ui-stencil/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export namespace Components {
interface OramaChatUserMessage {
"message": TChatMessage;
}
interface OramaDotsLoader {
}
interface OramaFacets {
"facetClicked": (facetName: string) => void;
"facets": Facet[];
Expand All @@ -72,11 +74,11 @@ export namespace Components {
}
interface OramaSearchBox {
"cloudIndex": CloudIndexConfig;
"colorScheme": 'dark' | 'light' | 'system';
"colorScheme"?: 'dark' | 'light' | 'system';
"facetProperty"?: string;
"open"?: boolean;
"resultMap"?: Partial<ResultMap>;
"themeConfig": Partial<TThemeOverrides>;
"themeConfig"?: Partial<TThemeOverrides>;
}
interface OramaSearchButton {
}
Expand Down Expand Up @@ -166,6 +168,12 @@ declare global {
prototype: HTMLOramaChatUserMessageElement;
new (): HTMLOramaChatUserMessageElement;
};
interface HTMLOramaDotsLoaderElement extends Components.OramaDotsLoader, HTMLStencilElement {
}
var HTMLOramaDotsLoaderElement: {
prototype: HTMLOramaDotsLoaderElement;
new (): HTMLOramaDotsLoaderElement;
};
interface HTMLOramaFacetsElement extends Components.OramaFacets, HTMLStencilElement {
}
var HTMLOramaFacetsElement: {
Expand Down Expand Up @@ -268,6 +276,7 @@ declare global {
"orama-chat-messages-container": HTMLOramaChatMessagesContainerElement;
"orama-chat-suggestions": HTMLOramaChatSuggestionsElement;
"orama-chat-user-message": HTMLOramaChatUserMessageElement;
"orama-dots-loader": HTMLOramaDotsLoaderElement;
"orama-facets": HTMLOramaFacetsElement;
"orama-input": HTMLOramaInputElement;
"orama-logo-icon": HTMLOramaLogoIconElement;
Expand Down Expand Up @@ -307,6 +316,8 @@ declare namespace LocalJSX {
interface OramaChatUserMessage {
"message"?: TChatMessage;
}
interface OramaDotsLoader {
}
interface OramaFacets {
"facetClicked"?: (facetName: string) => void;
"facets"?: Facet[];
Expand Down Expand Up @@ -385,6 +396,7 @@ declare namespace LocalJSX {
"orama-chat-messages-container": OramaChatMessagesContainer;
"orama-chat-suggestions": OramaChatSuggestions;
"orama-chat-user-message": OramaChatUserMessage;
"orama-dots-loader": OramaDotsLoader;
"orama-facets": OramaFacets;
"orama-input": OramaInput;
"orama-logo-icon": OramaLogoIcon;
Expand All @@ -410,6 +422,7 @@ declare module "@stencil/core" {
"orama-chat-messages-container": LocalJSX.OramaChatMessagesContainer & JSXBase.HTMLAttributes<HTMLOramaChatMessagesContainerElement>;
"orama-chat-suggestions": LocalJSX.OramaChatSuggestions & JSXBase.HTMLAttributes<HTMLOramaChatSuggestionsElement>;
"orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes<HTMLOramaChatUserMessageElement>;
"orama-dots-loader": LocalJSX.OramaDotsLoader & JSXBase.HTMLAttributes<HTMLOramaDotsLoaderElement>;
"orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes<HTMLOramaFacetsElement>;
"orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes<HTMLOramaInputElement>;
"orama-logo-icon": LocalJSX.OramaLogoIcon & JSXBase.HTMLAttributes<HTMLOramaLogoIconElement>;
Expand Down
12 changes: 6 additions & 6 deletions ...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 @@ -8,13 +8,13 @@ orama-chat-assistent-message {
border-radius: var(--radius-m, $radius-m);
padding: var(--spacing-m, $spacing-m);
margin: 0 var(--spacing-l, $spacing-l);
}

.message-actions {
display: flex;
margin-top: var(--spacing-xl, $spacing-xl);
gap: var(--spacing-s, $spacing-s);
justify-content: end;
}
.message-actions {
display: flex;
margin-top: var(--spacing-xl, $spacing-xl);
gap: var(--spacing-s, $spacing-s);
justify-content: end;
}

.sources-wrapper {
Expand Down
2 changes: 1 addition & 1 deletion ...s/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | --------------------------------------------------- | ----------- |
| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` |
| `message` | -- | | `{ role: "assistant" \| "user"; content: string; }` | `undefined` |


## Dependencies
Expand Down
7 changes: 7 additions & 0 deletions .../src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,10 @@ orama-chat-messages-container {
margin: var(--spacing-l, $spacing-l) 0;
gap: var(--spacing-l, $spacing-l);
}

.message-wrapper {
background: var(--background-color-secondary, background-color('secondary'));
border-radius: var(--radius-m, $radius-m);
padding: var(--spacing-m, $spacing-m);
margin: 0 var(--spacing-l, $spacing-l);
}
5 changes: 5 additions & 0 deletions ...l/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export class OramaChatMessagesContainer {
<orama-chat-assistent-message key={index} message={{ ...message }} />
),
)}
{chatContext.isLoading && (
<div class="message-wrapper">
<orama-dots-loader />
</div>
)}
</div>
</Host>
)
Expand Down
2 changes: 1 addition & 1 deletion ...onents/internal/orama-chat-messages-container/orama-chat-user-message/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | --------------------------------------------------- | ----------- |
| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` |
| `message` | -- | | `{ role: "assistant" \| "user"; content: string; }` | `undefined` |


## Dependencies
Expand Down
2 changes: 2 additions & 0 deletions ...ages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@

- [orama-chat-user-message](orama-chat-user-message)
- [orama-chat-assistent-message](orama-chat-assistent-message)
- [orama-dots-loader](../orama-dots-loader)

### Graph
```mermaid
graph TD;
orama-chat-messages-container --> orama-chat-user-message
orama-chat-messages-container --> orama-chat-assistent-message
orama-chat-messages-container --> orama-dots-loader
orama-chat-assistent-message --> orama-markdown
orama-chat-assistent-message --> orama-button
orama-chat-assistent-message --> orama-text
Expand Down
5 changes: 4 additions & 1 deletion ...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.suggestions-list {
display: flex;
align-items: center;
justify-content: center;
column-gap: var(--spacing-s, $spacing-s);
padding: var(--radius-s, $spacing-s) var(--radius-l, $spacing-l);

Expand All @@ -15,6 +14,10 @@
height: 0em;
background-color: transparent;
}

@media (--sm-min) {
justify-content: center;
}
}

.suggestion-button {
Expand Down
1 change: 1 addition & 0 deletions packages/ui-stencil/src/components/internal/orama-chat/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ graph TD;
orama-chat --> orama-text
orama-chat-messages-container --> orama-chat-user-message
orama-chat-messages-container --> orama-chat-assistent-message
orama-chat-messages-container --> orama-dots-loader
orama-chat-assistent-message --> orama-markdown
orama-chat-assistent-message --> orama-button
orama-chat-assistent-message --> orama-text
Expand Down
35 changes: 35 additions & 0 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
@@ -0,0 +1,35 @@
.dots-loader {
display: inline-flex;
align-items: center;
justify-content: center;
}

.dot {
width: pxToRem(6);
height: pxToRem(6);
margin: 0 var(--spacing-xs, $spacing-xs);
background-color: var(--text-color-primary, text-color(primary));
border-radius: 50%;
animation: dot-slide-up 1.4s infinite both;
}

.dot:nth-child(1) {
animation-delay: -0.32s;
}

.dot:nth-child(2) {
animation-delay: -0.16s;
}

@keyframes dot-slide-up {
0%,
80%,
100% {
opacity: 0.3;
transform: translate3d(0, 0, 0);
}
40% {
opacity: 1;
transform: translate3d(0, -4px, 0);
}
}
18 changes: 18 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component, h } from '@stencil/core'

@Component({
tag: 'orama-dots-loader',
styleUrl: 'orama-dots-loader.scss',
shadow: true,
})
export class DotsLoader {
render() {
return (
<div class="dots-loader">
<div class="dot" />
<div class="dot" />
<div class="dot" />
</div>
)
}
}
23 changes: 23 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-dots-loader/readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# dots-loader



<!-- Auto Generated Below -->


## Dependencies

### Used by

- [orama-chat-messages-container](../orama-chat-messages-container)

### Graph
```mermaid
graph TD;
orama-chat-messages-container --> orama-dots-loader
style orama-dots-loader fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
1 change: 1 addition & 0 deletions packages/ui-stencil/src/components/orama-chat-box/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ graph TD;
orama-chat --> orama-text
orama-chat-messages-container --> orama-chat-user-message
orama-chat-messages-container --> orama-chat-assistent-message
orama-chat-messages-container --> orama-dots-loader
orama-chat-assistent-message --> orama-markdown
orama-chat-assistent-message --> orama-button
orama-chat-assistent-message --> orama-text
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import type { CloudIndexConfig } from '@/types'
export class SearchBox {
@Element() el: HTMLElement

@Prop() themeConfig: Partial<TThemeOverrides>
@Prop() colorScheme: 'dark' | 'light' | 'system' = 'light'
@Prop() themeConfig?: Partial<TThemeOverrides>
@Prop() colorScheme?: 'dark' | 'light' | 'system' = 'light'
@Prop() facetProperty?: string
@Prop() open? = false
@Prop() resultMap?: Partial<ResultMap> = {}
Expand Down
3 changes: 2 additions & 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 @@
| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` |
| `facetProperty` | `facet-property` | | `string` | `undefined` |
| `open` | `open` | | `boolean` | `false` |
| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` |
| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` |
| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ light: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; dark: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; system: {}; }>; }` | `undefined` |


Expand Down Expand Up @@ -44,6 +44,7 @@ graph TD;
orama-chat --> orama-text
orama-chat-messages-container --> orama-chat-user-message
orama-chat-messages-container --> orama-chat-assistent-message
orama-chat-messages-container --> orama-dots-loader
orama-chat-assistent-message --> orama-markdown
orama-chat-assistent-message --> orama-button
orama-chat-assistent-message --> orama-text
Expand Down
5 changes: 4 additions & 1 deletion packages/ui-stencil/src/services/ChatService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@ export class ChatService {
this.answerSession = this.oramaClient.createAnswerSession({
events: {
onMessageChange: (messages) => {
chatContext.isLoading = false
chatContext.messages = [...messages]
},
onMessageLoading: (loading) => (chatContext.isLoading = loading),
onMessageLoading: (loading) => {
chatContext.isLoading = loading
},
onSourceChange: (sources) => {
console.log(sources)
},
Expand Down

0 comments on commit a8930ab

Please sign in to comment.