diff --git a/apps/storybook/stories/internal/orama-text.stories.tsx b/apps/storybook/stories/internal/orama-text.stories.tsx index 9abf9317..b004f18e 100644 --- a/apps/storybook/stories/internal/orama-text.stories.tsx +++ b/apps/storybook/stories/internal/orama-text.stories.tsx @@ -50,3 +50,11 @@ export const Small: Story = { class: 'my-optional-class', }, } + +export const Inactive: Story = { + render: Template('This is an inactive paragraph'), + args: { + as: 'p', + inactive: true, + }, +} diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 1030fbba..848024f5 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -108,7 +108,8 @@ export const OramaText = /*@__PURE__*/ defineContainer('orama-tex 'as', 'styledAs', 'class', - 'align' + 'align', + 'inactive' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 76b9fa4c..d3a0be8e 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -101,6 +101,10 @@ export namespace Components { * the optional class name */ "class"?: string; + /** + * show as inactive + */ + "inactive"?: TextProps['inactive']; /** * it defines how it should look like */ @@ -373,6 +377,10 @@ declare namespace LocalJSX { * the optional class name */ "class"?: string; + /** + * show as inactive + */ + "inactive"?: TextProps['inactive']; /** * it defines how it should look like */ 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 17181a20..cfe83fb8 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 @@ -32,3 +32,16 @@ orama-chat-messages-container { padding: var(--spacing-m, $spacing-m); margin: 0 var(--spacing-l, $spacing-l); } + +.message-error { + text-align: center; + padding: var(--spacing-l, $spacing-l) var(--spacing-s, $spacing-s); + background: var(--background-color-secondary, background-color('secondary')); + border-radius: var(--radius-m, $radius-m); + margin: 0 var(--spacing-l, $spacing-l); + + ph-warning { + display: block; + color: var(--text-color-inactive, text-color('inactive')); + } +} 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 530674ff..965e7c84 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 @@ -1,5 +1,6 @@ import { Component, Host, h } from '@stencil/core' import { chatContext } from '@/context/chatContext' +import '@phosphor-icons/webcomponents/dist/icons/PhWarning.mjs' @Component({ tag: 'orama-chat-messages-container', @@ -24,6 +25,14 @@ export class OramaChatMessagesContainer { )} + {chatContext.error && ( +
+ + + An error occurred while trying to search. Please try again. + +
+ )} ) 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 c4e8b013..9f61807c 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 @@ -16,6 +16,7 @@ - [orama-chat-user-message](orama-chat-user-message) - [orama-chat-assistent-message](orama-chat-assistent-message) - [orama-dots-loader](../orama-dots-loader) +- [orama-text](../orama-text) ### Graph ```mermaid @@ -23,6 +24,7 @@ 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-messages-container --> orama-text 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/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index 7aa2778e..0ce997c5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -31,6 +31,7 @@ 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-messages-container --> orama-text 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-text/orama-text.scss b/packages/ui-stencil/src/components/internal/orama-text/orama-text.scss index df61ba6c..cbab0ff5 100644 --- a/packages/ui-stencil/src/components/internal/orama-text/orama-text.scss +++ b/packages/ui-stencil/src/components/internal/orama-text/orama-text.scss @@ -33,3 +33,7 @@ .text-center { text-align: center; } + +.text-inactive { + color: var(--text-color-inactive, text-color('inactive')); +} diff --git a/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx b/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx index b22c3c8c..5a287616 100644 --- a/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx +++ b/packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx @@ -10,6 +10,8 @@ export interface TextProps { class?: string /** optionally change text alignment */ align?: 'left' | 'center' | 'right' + /** show as inactive */ + inactive?: boolean } @Component({ tag: 'orama-text', @@ -27,6 +29,7 @@ export class OramaText implements TextProps { @Prop() styledAs?: TextProps['styledAs'] @Prop() class?: string @Prop() align?: TextProps['align'] + @Prop() inactive?: TextProps['inactive'] @State() defaultStyle: string = this.styledAs === 'span' || this.styledAs === 'small' || this.styledAs === 'p' ? this.styledAs : this.as @@ -41,6 +44,7 @@ export class OramaText implements TextProps { class={{ [this.defaultStyle]: true, [`text-${this.align}`]: !!this.align, + 'text-inactive': !!this.inactive, [this.class]: !!this.class, }} {...textProps} diff --git a/packages/ui-stencil/src/components/internal/orama-text/readme.md b/packages/ui-stencil/src/components/internal/orama-text/readme.md index ac3bf668..79862b3f 100644 --- a/packages/ui-stencil/src/components/internal/orama-text/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-text/readme.md @@ -10,6 +10,7 @@ | `align` | `align` | optionally change text alignment | `"center" \| "left" \| "right"` | `undefined` | | `as` | `as` | it defines the HTML tag to be used | `"a" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "small" \| "span"` | `'p'` | | `class` | `class` | the optional class name | `string` | `undefined` | +| `inactive` | `inactive` | show as inactive | `boolean` | `undefined` | | `styledAs` | `styled-as` | it defines how it should look like | `"p" \| "small" \| "span"` | `undefined` | @@ -20,6 +21,7 @@ - [orama-chat](../orama-chat) - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message) - [orama-chat-box](../../orama-chat-box) + - [orama-chat-messages-container](../orama-chat-messages-container) - [orama-search-box](../../orama-search-box) - [orama-search-results](../orama-search-results) @@ -29,6 +31,7 @@ graph TD; orama-chat --> orama-text orama-chat-assistent-message --> orama-text orama-chat-box --> orama-text + orama-chat-messages-container --> orama-text orama-search-box --> orama-text orama-search-results --> orama-text style orama-text fill:#f9f,stroke:#333,stroke-width:4px 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 66bbbda7..79aef8b3 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -32,6 +32,7 @@ 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-messages-container --> orama-text 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/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index 78eb3002..40c65d12 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` | -- | | `{ 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<{ 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` | @@ -45,6 +45,7 @@ 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-messages-container --> orama-text 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 bb2ae3ed..ba403e71 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -14,6 +14,7 @@ export class ChatService { if (!this.oramaClient) { throw new OramaClientNotInitializedError() } + chatContext.error = false // TODO: Fix on Orama Client: message event supposed to be emitted as soon as a question is made. chatContext.messages = [...chatContext.messages, { role: 'user', content: term }]