Skip to content

Commit

Permalink
Merge pull request #21 from askorama/uireview-chat-height
Browse files Browse the repository at this point in the history 
Review Chat Height
  • Loading branch information
@rjborba
rjborba authored Jul 31, 2024
2 parents 115a568 + 2a6a35e commit 0d8f91d
Show file tree
Hide file tree
Showing 12 changed files with 33 additions and 34 deletions.
12 changes: 10 additions & 2 deletions apps/storybook/.storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@ import { DARK_THEME_BG, LIGTH_THEME_BG } from '../constants'
const preview = {
decorators: [
(story, context) => {
const classTheme = context.globals?.backgrounds?.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light'
return html`<div id="orama-ui" class="${classTheme}">${story()}</div>`
const bgTheme = context.globals?.backgrounds?.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light'
const heightValue = context.parameters?.layout === 'set-height' ? '613px' : 'auto'
return html`
<style>
orama-chat-box {
height: ${heightValue};
}
</style>
<div id="orama-ui" class="${bgTheme}">${story()}</div>
`
},
],
parameters: {
Expand Down
2 changes: 1 addition & 1 deletion apps/storybook/stories/docs/Welcome.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Meta } from "@storybook/blocks"
import { Basics } from "../components/basics/basics"
import { Basics } from "../../components/basics/basics"

<Meta title="Welcome" />

Expand Down
3 changes: 3 additions & 0 deletions apps/storybook/stories/public/orama-chat-box.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ const meta: Meta = {
control: { type: 'select' },
},
},
parameters: {
layout: 'set-height',
},
} satisfies Meta

export default meta
Expand Down
4 changes: 1 addition & 3 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 @@ -4,9 +4,6 @@
}

.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 @@ -28,6 +25,7 @@

.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: 0 additions & 5 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,11 +2,6 @@
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: 0 additions & 1 deletion ...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,7 +183,6 @@ 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
15 changes: 5 additions & 10 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 @@ -4,8 +4,7 @@ orama-chat {
flex-direction: column;
flex-grow: 1;
overflow: hidden;
// todo: this is probabily to fix, since now it's not meant for generic purpose, but to be used in orama website
max-height: pxToRem(613);
height: 100%;
// background: linear-gradient(180deg, var(--background-ai-gradient-one) 0%, var(--background-ai-gradient-two) 50%);
background: var(--background-color-primary, background-color('primary'));
}
Expand All @@ -30,6 +29,10 @@ orama-chat {
background-color: #b2b2b285;
border-radius: var(--border-radius-l, $radius-l);
}

&.isEmpty {
justify-content: flex-end;
}
}

.messages-container-wrapper-non-scrollable {
Expand Down Expand Up @@ -72,14 +75,6 @@ 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
12 changes: 7 additions & 5 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,6 +136,7 @@ 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 @@ -153,16 +154,17 @@ export class OramaChat {
)}
{/* CHAT MESSAGES */}
<div class={'messages-container-wrapper-non-scrollable'}>
<div class="messages-container-wrapper" ref={(ref) => (this.messagesContainerRef = ref)}>
<div
class={`messages-container-wrapper ${!chatContext.interactions?.length ? 'isEmpty' : ''}`}
ref={(ref) => (this.messagesContainerRef = ref)}
>
{chatContext.interactions?.length ? (
<orama-chat-messages-container interactions={chatContext.interactions} />
) : null}

{/* TODO: Provide a better animation */}
{!chatContext.interactions?.length ? (
<div class="suggestions-wrapper">
<orama-chat-suggestions suggestions={SUGGESTIONS} suggestionClicked={this.handleSuggestionClick} />
</div>
<orama-chat-suggestions suggestions={SUGGESTIONS} suggestionClicked={this.handleSuggestionClick} />
) : null}
{/* TODO: not required for chatbox, but maybe required for Searchbox v2 */}
{/* <orama-logo-icon /> */}
Expand Down Expand Up @@ -201,7 +203,7 @@ export class OramaChat {
placeholder={this.placeholder}
>
<div slot="adornment-end">
{[TAnswerStatus.streaming, TAnswerStatus.loading].includes(lastInteractionStatus) ? (
{lastInteractionStreaming ? (
<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; description?: string; path?: string; }` | `undefined` |
| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` |


## Dependencies
Expand Down
7 changes: 3 additions & 4 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,13 +2,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-l, $spacing-l) 0;
}

.dot {
width: pxToRem(4);
height: pxToRem(4);
margin: 0 var(--spacing-2xs, $spacing-2xs);
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;
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; description?: string; path?: string; }` | `undefined` |
| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: 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` | -- | | `{ 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<{ 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

0 comments on commit 0d8f91d

Please sign in to comment.