Skip to content

Commit

Permalink
feat: add error message
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-francesca
g-francesca committed Jul 22, 2024
1 parent 87a4d3f commit ee8f107
Show file tree
Hide file tree
Showing 13 changed files with 58 additions and 2 deletions.
8 changes: 8 additions & 0 deletions apps/storybook/stories/internal/orama-text.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}
3 changes: 2 additions & 1 deletion packages/ui-stencil-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@ export const OramaText = /*@__PURE__*/ defineContainer<JSX.OramaText>('orama-tex
'as',
'styledAs',
'class',
'align'
'align',
'inactive'
]);


Expand Down
8 changes: 8 additions & 0 deletions packages/ui-stencil/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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
*/
Expand Down
13 changes: 13 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 @@ -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'));
}
}
9 changes: 9 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
@@ -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',
Expand All @@ -24,6 +25,14 @@ export class OramaChatMessagesContainer {
<orama-dots-loader />
</div>
)}
{chatContext.error && (
<div class="message-error">
<ph-warning size={16} />
<orama-text styledAs="span" inactive>
An error occurred while trying to search. Please try again.
</orama-text>
</div>
)}
</div>
</Host>
)
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 @@ -16,13 +16,15 @@
- [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
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
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 @@ -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
Expand Down
4 changes: 4 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-text/orama-text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@
.text-center {
text-align: center;
}

.text-inactive {
color: var(--text-color-inactive, text-color('inactive'));
}
4 changes: 4 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-text/orama-text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand All @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions packages/ui-stencil/src/components/internal/orama-text/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |


Expand All @@ -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)

Expand All @@ -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
Expand Down
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 @@ -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
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` | -- | | `{ 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` |


Expand Down Expand Up @@ -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
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 @@ -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 }]
Expand Down

0 comments on commit ee8f107

Please sign in to comment.