diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts index 08c14906..b7a3b118 100644 --- a/packages/ui-stencil-react/src/components/stencil-generated/index.ts +++ b/packages/ui-stencil-react/src/components/stencil-generated/index.ts @@ -14,6 +14,7 @@ export const OramaChatBox = /*@__PURE__*/createReactComponent('orama-chat-messages-container'); export const OramaChatSuggestions = /*@__PURE__*/createReactComponent('orama-chat-suggestions'); export const OramaChatUserMessage = /*@__PURE__*/createReactComponent('orama-chat-user-message'); +export const OramaDotsLoader = /*@__PURE__*/createReactComponent('orama-dots-loader'); export const OramaFacets = /*@__PURE__*/createReactComponent('orama-facets'); export const OramaInput = /*@__PURE__*/createReactComponent('orama-input'); export const OramaLogoIcon = /*@__PURE__*/createReactComponent('orama-logo-icon'); diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 20bad61f..1030fbba 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -44,6 +44,9 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer('orama-dots-loader', undefined); + + export const OramaFacets = /*@__PURE__*/ defineContainer('orama-facets', undefined, [ 'facets', 'selectedFacet', diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index d1c978b1..76b9fa4c 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -46,6 +46,8 @@ export namespace Components { interface OramaChatUserMessage { "message": TChatMessage; } + interface OramaDotsLoader { + } interface OramaFacets { "facetClicked": (facetName: string) => void; "facets": Facet[]; @@ -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; - "themeConfig": Partial; + "themeConfig"?: Partial; } interface OramaSearchButton { } @@ -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: { @@ -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; @@ -307,6 +316,8 @@ declare namespace LocalJSX { interface OramaChatUserMessage { "message"?: TChatMessage; } + interface OramaDotsLoader { + } interface OramaFacets { "facetClicked"?: (facetName: string) => void; "facets"?: Facet[]; @@ -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; @@ -410,6 +422,7 @@ declare module "@stencil/core" { "orama-chat-messages-container": LocalJSX.OramaChatMessagesContainer & JSXBase.HTMLAttributes; "orama-chat-suggestions": LocalJSX.OramaChatSuggestions & JSXBase.HTMLAttributes; "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes; + "orama-dots-loader": LocalJSX.OramaDotsLoader & JSXBase.HTMLAttributes; "orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes; "orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes; "orama-logo-icon": LocalJSX.OramaLogoIcon & JSXBase.HTMLAttributes; 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 47695a9d..b7b97e84 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 @@ -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 { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md index 5838c4c1..de75c1c0 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | --------- | --------- | ----------- | --------------------------------------------------- | ----------- | -| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` | +| `message` | -- | | `{ role: "assistant" \| "user"; content: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss index 8557360a..17181a20 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss @@ -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); +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx index b32ff1f9..530674ff 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx @@ -19,6 +19,11 @@ export class OramaChatMessagesContainer { ), )} + {chatContext.isLoading && ( +
+ +
+ )} ) diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md index 2d09cc5e..d481cd72 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | --------- | --------- | ----------- | --------------------------------------------------- | ----------- | -| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` | +| `message` | -- | | `{ role: "assistant" \| "user"; content: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md index a2cb86cf..c4e8b013 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss index d1e35d92..1373b40d 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss @@ -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); @@ -15,6 +14,10 @@ height: 0em; background-color: transparent; } + + @media (--sm-min) { + justify-content: center; + } } .suggestion-button { diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index dceffcce..7aa2778e 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss new file mode 100644 index 00000000..12cf26de --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss @@ -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); + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.tsx b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.tsx new file mode 100644 index 00000000..a2637520 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.tsx @@ -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 ( +
+
+
+
+
+ ) + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/readme.md b/packages/ui-stencil/src/components/internal/orama-dots-loader/readme.md new file mode 100644 index 00000000..f551bac1 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-dots-loader/readme.md @@ -0,0 +1,23 @@ +# dots-loader + + + + + + +## 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/)* diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index 804ce2a8..66bbbda7 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx index ee41e40d..d19c00a5 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx @@ -17,8 +17,8 @@ import type { CloudIndexConfig } from '@/types' export class SearchBox { @Element() el: HTMLElement - @Prop() themeConfig: Partial - @Prop() colorScheme: 'dark' | 'light' | 'system' = 'light' + @Prop() themeConfig?: Partial + @Prop() colorScheme?: 'dark' | 'light' | 'system' = 'light' @Prop() facetProperty?: string @Prop() open? = false @Prop() resultMap?: Partial = {} diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index adc38da3..78eb3002 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -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` | @@ -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 diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index 6308c3ea..bb2ae3ed 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -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) },