From 3b5c4af585fdf4eb26e2f891870962e660d8022b Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Wed, 31 Jul 2024 14:50:58 +0200 Subject: [PATCH 01/19] style: desktop modal container --- .../stories/public/orama-chat-box.stories.tsx | 2 +- .../public/orama-search-box.stories.tsx | 2 +- .../public/orama-search-button.stories.tsx | 2 +- .../internal/orama-input/orama-input.scss | 2 +- .../orama-navigation-bar.scss | 4 +++ .../internal/orama-search/orama-search.scss | 13 ++++++++-- .../orama-search-box/orama-search-box.scss | 25 ++++++++++++++++++- .../orama-search-box/orama-search-box.tsx | 2 +- .../src/components/orama-search-box/readme.md | 2 +- 9 files changed, 45 insertions(+), 9 deletions(-) diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx index 6f458646..0994f1a7 100644 --- a/apps/storybook/stories/public/orama-chat-box.stories.tsx +++ b/apps/storybook/stories/public/orama-chat-box.stories.tsx @@ -17,7 +17,7 @@ const demoIndexes = { } const meta: Meta = { - title: 'Components/Public/ChatBox', + title: 'Components/ChatBox', component: 'orama-chat-box', tags: ['autodocs'], argTypes: { diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx index eb3c4e0e..a2cf8a26 100644 --- a/apps/storybook/stories/public/orama-search-box.stories.tsx +++ b/apps/storybook/stories/public/orama-search-box.stories.tsx @@ -3,7 +3,7 @@ import type { Components } from '@orama/wc-components' type Story = StoryObj const meta: Meta = { - title: 'Components/Public/SearchBox', + title: 'Components/SearchBox', component: 'orama-search-box', tags: ['autodocs'], argTypes: { diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx index 1ed7ed09..15442e72 100644 --- a/apps/storybook/stories/public/orama-search-button.stories.tsx +++ b/apps/storybook/stories/public/orama-search-button.stories.tsx @@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/web-components' import type { Components } from '@orama/wc-components' const meta: Meta = { - title: 'Components/Public/SearchButton', + title: 'Components/SearchButton', component: 'orama-search-button', tags: ['autodocs'], } satisfies Meta diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss index 1f72690d..ec4e1706 100644 --- a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss +++ b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss @@ -1,4 +1,4 @@ -.wrapper { +orama-input { margin: var(--spacing-s, $spacing-s) 0; } diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss index 96b736a6..56619fab 100644 --- a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss +++ b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss @@ -3,6 +3,10 @@ align-items: center; padding: var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l); background-color: var(--background-color-primary, background-color('primary')); + + @media (--md-min) { + display: none; + } } .corner-section { diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss index ae2e151d..cf182f54 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss @@ -2,11 +2,20 @@ orama-search { display: flex; flex-direction: column; overflow: hidden; - padding: var(--spacing-s, $spacing-s) 0; + + @media (--md-max) { + padding: var(--spacing-s, $spacing-s) 0; + } } orama-input { - padding: 0 var(--spacing-l, $spacing-l); + @media (--md-min) { + margin: 0; + } + + @media (--md-max) { + padding: 0 var(--spacing-l, $spacing-l); + } } .result-wrapper { diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index c53ed167..7db14e96 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -2,7 +2,7 @@ display: block; } -.orama-container { +.inner-container { display: flex; background-color: var(--background-color-primary, background('primary')); position: fixed; @@ -13,6 +13,29 @@ &.hidden { display: none; } + + @media (--md-min) { + width: 80%; + margin: 0 auto; + max-width: pxToRem(615); + height: 58vh; + max-height: pxToRem(400); + position: fixed; + top: 50%; + transform: translate3d(0, -50%, 0); + border-radius: var(--radius-m, $radius-m); + padding: 0; + + orama-input { + padding: 0; + margin: 0; + border-radius: 0; + } + + input[type='search'] { + border-radius: var(--radius-m, $radius-m) var(--radius-m, $radius-m) 0 0; + } + } } .main { 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 02efa64e..1fb9e945 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 @@ -128,7 +128,7 @@ export class SearchBox { return ( -
+
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 7fe8637c..e16f77f7 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 @@ | `facetProperty` | `facet-property` | | `string` | `undefined` | | `index` | -- | | `{ api_key: string; endpoint: 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<{ 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` | From ddc943e81add2ba152db8b99043a9affc52e2b0b Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Wed, 31 Jul 2024 16:06:20 +0200 Subject: [PATCH 02/19] fix: fix import component --- apps/storybook/stories/docs/Welcome.mdx | 2 +- .../storybook/stories/docs/frameworks/Vue.mdx | 33 +++++++------------ .../orama-search-box/orama-search-box.scss | 6 +++- .../src/components/orama-search-box/readme.md | 2 +- 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/apps/storybook/stories/docs/Welcome.mdx b/apps/storybook/stories/docs/Welcome.mdx index 8548c9ef..7aa85b95 100644 --- a/apps/storybook/stories/docs/Welcome.mdx +++ b/apps/storybook/stories/docs/Welcome.mdx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/blocks" -import { Basics } from "../components/basics/basics" +import { Basics } from "../../components/basics/basics" diff --git a/apps/storybook/stories/docs/frameworks/Vue.mdx b/apps/storybook/stories/docs/frameworks/Vue.mdx index 63b077a2..2f6c1a06 100644 --- a/apps/storybook/stories/docs/frameworks/Vue.mdx +++ b/apps/storybook/stories/docs/frameworks/Vue.mdx @@ -4,11 +4,11 @@ import { Meta } from '@storybook/blocks'; # Vue -We offer an Angular version of every public component so you can use them in your Angular projects. +We offer a Vue version of every public component so you can use them in your Angular projects. ## Installation -To add the Orama UI Kit to your Angulat project, run: +To add the Orama UI Kit to your Vue project, run: ```bash npm install @orama/vue-components @@ -17,34 +17,23 @@ You can use pnpm or yarn if you prefer. ## Usage -In your `app.module.ts` file, import the component definition: +In your `main.ts` file, import the component definition: ```tsx -import { ComponentLibraryModule } from '@orama/angular-components/dist/component-library' - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, ComponentLibraryModule], - providers: [], - bootstrap: [AppComponent], - schemas: [] -}) -``` - -We have to make sure that the global styles are referenced in the Angular project. -You can do this by importing the styles in your Angular project's styles.css or styles.scss +import { createApp } from 'vue' +import { ComponentLibrary } from '@orama/vue-components' +import App from './App.vue' -```css -@import '@orama/wc-components/dist/orama-ui/orama-ui.css'; +createApp(App).use(ComponentLibrary).mount('#app') ``` You can then use the components you need in your project: ```html +/> ``` diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 7db14e96..94f085e7 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -1,5 +1,9 @@ :host { - display: block; + display: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; } .inner-container { 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 e16f77f7..7fe8637c 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 @@ | `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` | From fef9e854f2d6d044f912750739f6ed89c1f294bb Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Wed, 31 Jul 2024 16:40:39 +0200 Subject: [PATCH 03/19] style: add backdrop --- .../internal/orama-search/orama-search.scss | 4 ---- .../orama-search-box/orama-search-box.scss | 4 ++-- .../src/components/orama-search-box/readme.md | 16 ++++++++-------- packages/ui-stencil/src/config/colors.ts | 6 ++++-- packages/ui-stencil/src/styles/_colors.scss | 6 ++++++ packages/ui-stencil/src/styles/_themes.scss | 2 ++ 6 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss index cf182f54..73e62a0f 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss @@ -9,10 +9,6 @@ orama-search { } orama-input { - @media (--md-min) { - margin: 0; - } - @media (--md-max) { padding: 0 var(--spacing-l, $spacing-l); } diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 94f085e7..a9b924fd 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -1,9 +1,10 @@ :host { - display: fixed; + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background-color: var(--backdrop-color-primary, palette('backdrop', 'primary')); } .inner-container { @@ -24,7 +25,6 @@ max-width: pxToRem(615); height: 58vh; max-height: pxToRem(400); - position: fixed; top: 50%; transform: translate3d(0, -50%, 0); border-radius: var(--radius-m, $radius-m); 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 7fe8637c..fa30d582 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,14 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `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` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `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; "--backdrop-color-primary": 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; "--backdrop-color-primary": string; }; }>; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts index e1613355..d40123f2 100644 --- a/packages/ui-stencil/src/config/colors.ts +++ b/packages/ui-stencil/src/config/colors.ts @@ -41,7 +41,8 @@ export default { "--button-text-color-primary": "#f7f6f9", "--button-text-color-inactive": "#99989d", "--button-background-color-primary": "#8152ee", - "--button-background-color-inactive": "#efefef" + "--button-background-color-inactive": "#efefef", + "--backdrop-color-primary": "rgba(0, 0, 0, 0.7)" }, "dark": { "--text-color-primary": "#fbfbfb", @@ -66,6 +67,7 @@ export default { "--icon-color-accent": "#8152ee", "--shadow-color-primary": "black", "--button-text-color-primary": "#efefef", - "--button-background-color-primary": "#432d77" + "--button-background-color-primary": "#432d77", + "--backdrop-color-primary": "rgba(0, 0, 0, 0.7)" } }; \ No newline at end of file diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index 3c05593d..3913c9a2 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/packages/ui-stencil/src/styles/_colors.scss @@ -69,6 +69,9 @@ $palette: ( inactive: $gray100, // todo: value to check with Angela ), + 'backdrop': ( + primary: rgba(black, 0.7), + ), ); /** @@ -112,6 +115,9 @@ $paletteDark: ( 'button-background': ( primary: $purple700, ), + 'backdrop': ( + primary: rgba(black, 0.7), + ), ); :export { diff --git a/packages/ui-stencil/src/styles/_themes.scss b/packages/ui-stencil/src/styles/_themes.scss index 77fe37a2..55c26a6b 100644 --- a/packages/ui-stencil/src/styles/_themes.scss +++ b/packages/ui-stencil/src/styles/_themes.scss @@ -27,6 +27,7 @@ $theme-colors-light: ( '--icon-color-accent': icon-color('accent'), '--button-text-color-primary': button-text-color('primary'), '--button-background-color-primary': button-background-color('primary'), + '--backdrop-color-primary': palette('backdrop', 'primary'), ); $theme-colors-dark: ( @@ -55,4 +56,5 @@ $theme-colors-dark: ( '--shadow-color-primary': shadow-color('primary', $paletteDark), '--button-text-color-primary': button-text-color('primary', $paletteDark), '--button-background-color-primary': button-background-color('primary', $paletteDark), + '--backdrop-color-primary': palette('backdrop', 'primary', $paletteDark), ); From 6776dd12cb2ced1f660bce710c674eb2535232e5 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 10:51:41 +0200 Subject: [PATCH 04/19] chore: move export directive to temp file --- packages/ui-stencil/extract-scss-vars.js | 32 +++++++++- .../src/components/orama-search-box/readme.md | 16 ++--- packages/ui-stencil/src/config/colors.ts | 2 +- packages/ui-stencil/src/styles/_colors.scss | 38 ++---------- .../ui-stencil/src/styles/_functions.scss | 16 +++++ packages/ui-stencil/src/styles/_theme.scss | 4 ++ packages/ui-stencil/src/styles/_themes.scss | 60 ------------------- .../ui-stencil/src/styles/_variables.scss | 2 +- 8 files changed, 66 insertions(+), 104 deletions(-) create mode 100644 packages/ui-stencil/src/styles/_theme.scss delete mode 100644 packages/ui-stencil/src/styles/_themes.scss diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js index d9c69e5d..d8fd0246 100644 --- a/packages/ui-stencil/extract-scss-vars.js +++ b/packages/ui-stencil/extract-scss-vars.js @@ -3,8 +3,33 @@ const sass = require('sass') const postcss = require('postcss') const postcssScss = require('postcss-scss') -// Path to your SCSS file -const scssFilePath = './src/styles/_colors.scss' +const scssFilePath = './src/styles/_tempColors.scss' + +function createTempColorsFile() { + const colorsContent = fs.readFileSync('./src/styles/_colors.scss', 'utf-8') + const primitiveColors = colorsContent.match(/(\$[a-zA-Z0-9-]+:.*;)/g).join('\n') + const primitiveColorsToExport = primitiveColors.replace(/\$/g, '').replace(/;/g, ';').replace(/:/g, ':') + + const tempColorsContent = ` + @import 'colors'; + + :export { + ${primitiveColorsToExport} + @each $key, $value in $palette { + @each $subkey, $subvalue in $value { + --#{$key}-color-#{$subkey}-light: #{$subvalue}; + } + } + + @each $key, $value in $paletteDark { + @each $subkey, $subvalue in $value { + --#{$key}-color-#{$subkey}-dark: #{$subvalue}; + } + } + } + ` + fs.writeFileSync('./src/styles/_tempColors.scss', tempColorsContent, 'utf-8') +} // Function to compile SCSS to CSS function compileScss(filePath) { @@ -58,6 +83,7 @@ async function extractExportVariables(css) { // Main function ;(async () => { try { + createTempColorsFile() const css = compileScss(scssFilePath) const variables = await extractExportVariables(css) @@ -69,6 +95,8 @@ async function extractExportVariables(css) { // Write the JavaScript file fs.writeFileSync('./src/config/colors.ts', `${comment}\n${jsContent}`, 'utf-8') + // remove the temporary file + fs.unlinkSync(scssFilePath) console.log('SCSS :export variables have been extracted to _colors.js') } catch (error) { console.error('Error extracting SCSS :export variables:', error) 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 fa30d582..81eefc14 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,14 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `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; "--backdrop-color-primary": 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; "--backdrop-color-primary": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `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; red: 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; "--backdrop-color-primary": 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; "--backdrop-background-color-primary": string; }; }>; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts index d40123f2..e797ff4d 100644 --- a/packages/ui-stencil/src/config/colors.ts +++ b/packages/ui-stencil/src/config/colors.ts @@ -68,6 +68,6 @@ export default { "--shadow-color-primary": "black", "--button-text-color-primary": "#efefef", "--button-background-color-primary": "#432d77", - "--backdrop-color-primary": "rgba(0, 0, 0, 0.7)" + "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)" } }; \ No newline at end of file diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index 3913c9a2..fffd7968 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/packages/ui-stencil/src/styles/_colors.scss @@ -1,3 +1,8 @@ +/* +!IMPORTANT: Make sure to also run 'pnpm convert-scss-to-js' if you make changes to this file +TODO: We'll make this task automatic in the future +*/ + /** * * PRIMITIVE COLORS */ @@ -115,38 +120,7 @@ $paletteDark: ( 'button-background': ( primary: $purple700, ), - 'backdrop': ( + 'backdrop-background': ( primary: rgba(black, 0.7), ), ); - -:export { - gray50: $gray50; - gray100: $gray100; - gray200: $gray200; - gray300: $gray300; - gray400: $gray400; - gray500: $gray500; - gray600: $gray600; - gray700: $gray700; - gray800: $gray800; - gray900: $gray900; - gray950: $gray950; - purple100: $purple100; - purple200: $purple200; - purple300: $purple300; - purple500: $purple500; - purple700: $purple700; - - @each $key, $value in $palette { - @each $subkey, $subvalue in $value { - --#{$key}-color-#{$subkey}-light: #{$subvalue}; - } - } - - @each $key, $value in $paletteDark { - @each $subkey, $subvalue in $value { - --#{$key}-color-#{$subkey}-dark: #{$subvalue}; - } - } -} diff --git a/packages/ui-stencil/src/styles/_functions.scss b/packages/ui-stencil/src/styles/_functions.scss index 17254ca8..53e23d58 100644 --- a/packages/ui-stencil/src/styles/_functions.scss +++ b/packages/ui-stencil/src/styles/_functions.scss @@ -69,3 +69,19 @@ } @return map-get($map, $key); } + +/* ===GENERATE A THEME MAP FROM PALETTE=== */ +@function generate-theme-map($palette: $palette) { + $theme: (); + @each $feature, $featureMap in $palette { + @each $role, $color in $featureMap { + $theme: map-merge( + $theme, + ( + '--#{$feature}-color-#{$role}': $color, + ) + ); + } + } + @return $theme; +} diff --git a/packages/ui-stencil/src/styles/_theme.scss b/packages/ui-stencil/src/styles/_theme.scss new file mode 100644 index 00000000..6c28d5d8 --- /dev/null +++ b/packages/ui-stencil/src/styles/_theme.scss @@ -0,0 +1,4 @@ +@import 'colors'; + +$theme-colors-light: generate-theme-map($palette); +$theme-colors-dark: generate-theme-map($paletteDark); diff --git a/packages/ui-stencil/src/styles/_themes.scss b/packages/ui-stencil/src/styles/_themes.scss deleted file mode 100644 index 55c26a6b..00000000 --- a/packages/ui-stencil/src/styles/_themes.scss +++ /dev/null @@ -1,60 +0,0 @@ -@import 'colors'; - -// TODO: review --background-ai-gradient-one and --background-ai-gradient-two with Angela -$theme-colors-light: ( - '--text-color-primary': text-color('primary'), - '--text-color-secondary': text-color('secondary'), - '--text-color-tertiary': text-color('tertiary'), - '--text-color-accent': text-color('accent'), - '--text-color-inactive': text-color('inactive'), - '--text-color-reverse': text-color('reverse'), - '--background-color-primary': background-color('primary'), - '--background-color-secondary': background-color('secondary'), - '--background-color-tertiary': background-color('tertiary'), - '--background-color-fourth': background-color('fourth'), - '--background-ai-gradient-one': background-color('primary'), - '--background-ai-gradient-two': #ece7f5, - '--background-color-reverse': background-color('reverse'), - '--border-color-primary': border-color('primary'), - '--border-color-secondary': border-color('secondary'), - '--border-color-tertiary': border-color('tertiary'), - '--border-color-accent': border-color('accent'), - '--icon-color-primary': icon-color('primary'), - '--icon-color-secondary': icon-color('secondary'), - '--icon-color-tertiary': icon-color('tertiary'), - '--icon-color-inactive': icon-color('inactive'), - '--shadow-color-primary': shadow-color('primary'), - '--icon-color-accent': icon-color('accent'), - '--button-text-color-primary': button-text-color('primary'), - '--button-background-color-primary': button-background-color('primary'), - '--backdrop-color-primary': palette('backdrop', 'primary'), -); - -$theme-colors-dark: ( - '--text-color-primary': text-color('primary', $paletteDark), - '--text-color-secondary': text-color('secondary', $paletteDark), - '--text-color-tertiary': text-color('tertiary', $paletteDark), - '--text-color-inactive': text-color('inactive', $paletteDark), - '--text-color-accent': text-color('accent', $paletteDark), - '--text-color-reverse': text-color('reverse', $paletteDark), - '--background-color-primary': background-color('primary', $paletteDark), - '--background-color-secondary': background-color('secondary', $paletteDark), - '--background-color-tertiary': background-color('tertiary', $paletteDark), - '--background-color-fourth': background-color('fourth', $paletteDark), - '--background-color-reverse': background-color('reverse', $paletteDark), - '--background-ai-gradient-one': background-color('primary', $paletteDark), - '--background-ai-gradient-two': #251e37, - '--border-color-primary': border-color('primary', $paletteDark), - '--border-color-secondary': border-color('secondary', $paletteDark), - '--border-color-tertiary': border-color('tertiary', $paletteDark), - '--border-color-accent': border-color('accent', $paletteDark), - '--icon-color-primary': icon-color('primary', $paletteDark), - '--icon-color-secondary': icon-color('secondary', $paletteDark), - '--icon-color-tertiary': icon-color('tertiary', $paletteDark), - '--icon-color-inactive': icon-color('inactive', $paletteDark), - '--icon-color-accent': icon-color('accent', $paletteDark), - '--shadow-color-primary': shadow-color('primary', $paletteDark), - '--button-text-color-primary': button-text-color('primary', $paletteDark), - '--button-background-color-primary': button-background-color('primary', $paletteDark), - '--backdrop-color-primary': palette('backdrop', 'primary', $paletteDark), -); diff --git a/packages/ui-stencil/src/styles/_variables.scss b/packages/ui-stencil/src/styles/_variables.scss index 65f92b7f..ef81145b 100644 --- a/packages/ui-stencil/src/styles/_variables.scss +++ b/packages/ui-stencil/src/styles/_variables.scss @@ -1,5 +1,5 @@ @import 'colors'; -@import 'themes'; +@import 'theme'; @import 'mq'; @import 'typography'; @import 'spacing'; From d5b358c37969ee63487118c79476df3ccdb8d6b4 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 11:35:21 +0200 Subject: [PATCH 05/19] feat: add summary button --- .../src/components/stencil-generated/index.ts | 1 + packages/ui-stencil-vue/lib/components.ts | 6 ++++ packages/ui-stencil/src/components.d.ts | 17 ++++++++++ .../orama-chat-button/orama-chat-button.scss | 22 +++++++++++++ .../orama-chat-button/orama-chat-button.tsx | 30 ++++++++++++++++++ .../internal/orama-chat-button/readme.md | 31 +++++++++++++++++++ .../internal/orama-search/orama-search.tsx | 5 +++ .../internal/orama-search/readme.md | 2 ++ .../orama-search-box/orama-search-box.scss | 3 +- .../src/components/orama-search-box/readme.md | 17 +++++----- 10 files changed, 124 insertions(+), 10 deletions(-) create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx create mode 100644 packages/ui-stencil/src/components/internal/orama-chat-button/readme.md 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 b4983fb6..82f5802f 100644 --- a/packages/ui-stencil-react/src/components/stencil-generated/index.ts +++ b/packages/ui-stencil-react/src/components/stencil-generated/index.ts @@ -11,6 +11,7 @@ export const OramaButton = /*@__PURE__*/createReactComponent('orama-chat'); export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent('orama-chat-assistent-message'); export const OramaChatBox = /*@__PURE__*/createReactComponent('orama-chat-box'); +export const OramaChatButton = /*@__PURE__*/createReactComponent('orama-chat-button'); export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent('orama-chat-messages-container'); export const OramaChatSuggestions = /*@__PURE__*/createReactComponent('orama-chat-suggestions'); export const OramaChatUserMessage = /*@__PURE__*/createReactComponent('orama-chat-user-message'); diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index c0f5d9f7..3cd2ac8b 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -39,6 +39,12 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer('ora ]); +export const OramaChatButton = /*@__PURE__*/ defineContainer('orama-chat-button', undefined, [ + 'label', + 'class' +]); + + export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer('orama-chat-messages-container', undefined, [ 'interactions' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index d780e9f8..a10616ec 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -45,6 +45,10 @@ export namespace Components { "sourceBaseUrl"?: string; "sourcesMap"?: SourcesMap; } + interface OramaChatButton { + "class"?: string; + "label": string; + } interface OramaChatMessagesContainer { "interactions": TChatInteraction[]; } @@ -163,6 +167,12 @@ declare global { prototype: HTMLOramaChatBoxElement; new (): HTMLOramaChatBoxElement; }; + interface HTMLOramaChatButtonElement extends Components.OramaChatButton, HTMLStencilElement { + } + var HTMLOramaChatButtonElement: { + prototype: HTMLOramaChatButtonElement; + new (): HTMLOramaChatButtonElement; + }; interface HTMLOramaChatMessagesContainerElement extends Components.OramaChatMessagesContainer, HTMLStencilElement { } var HTMLOramaChatMessagesContainerElement: { @@ -286,6 +296,7 @@ declare global { "orama-chat": HTMLOramaChatElement; "orama-chat-assistent-message": HTMLOramaChatAssistentMessageElement; "orama-chat-box": HTMLOramaChatBoxElement; + "orama-chat-button": HTMLOramaChatButtonElement; "orama-chat-messages-container": HTMLOramaChatMessagesContainerElement; "orama-chat-suggestions": HTMLOramaChatSuggestionsElement; "orama-chat-user-message": HTMLOramaChatUserMessageElement; @@ -328,6 +339,10 @@ declare namespace LocalJSX { "sourceBaseUrl"?: string; "sourcesMap"?: SourcesMap; } + interface OramaChatButton { + "class"?: string; + "label"?: string; + } interface OramaChatMessagesContainer { "interactions"?: TChatInteraction[]; } @@ -419,6 +434,7 @@ declare namespace LocalJSX { "orama-chat": OramaChat; "orama-chat-assistent-message": OramaChatAssistentMessage; "orama-chat-box": OramaChatBox; + "orama-chat-button": OramaChatButton; "orama-chat-messages-container": OramaChatMessagesContainer; "orama-chat-suggestions": OramaChatSuggestions; "orama-chat-user-message": OramaChatUserMessage; @@ -445,6 +461,7 @@ declare module "@stencil/core" { "orama-chat": LocalJSX.OramaChat & JSXBase.HTMLAttributes; "orama-chat-assistent-message": LocalJSX.OramaChatAssistentMessage & JSXBase.HTMLAttributes; "orama-chat-box": LocalJSX.OramaChatBox & JSXBase.HTMLAttributes; + "orama-chat-button": LocalJSX.OramaChatButton & JSXBase.HTMLAttributes; "orama-chat-messages-container": LocalJSX.OramaChatMessagesContainer & JSXBase.HTMLAttributes; "orama-chat-suggestions": LocalJSX.OramaChatSuggestions & JSXBase.HTMLAttributes; "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes; diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss new file mode 100644 index 00000000..570a5db4 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -0,0 +1,22 @@ +:host { + padding: var(--spacing-s, $spacing-s); +} + +.chat-button { + @include paragraph(); + display: flex; + width: 100%; + padding: var(--spacing-s, $spacing-s); + align-items: center; + gap: var(--spacing-s, $spacing-s); + cursor: pointer; + border-radius: var(--spacing-s, $spacing-s); + border: 1px solid transparent; + background-color: transparent; + + @media (hover: hover) { + &:hover { + background-color: var(--background-color-tertiary, background-color('tertiary')); + } + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx new file mode 100644 index 00000000..053adc62 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx @@ -0,0 +1,30 @@ +import { Component, Prop, h, Element, Host } from '@stencil/core' +import { getNonExplicitAttributes } from '@/utils/utils' + +@Component({ + tag: 'orama-chat-button', + styleUrl: 'orama-chat-button.scss', + shadow: true, +}) +/** + * The orama-chat-button component is used to render a button element that will trigger the chat. + */ +export class OramaChatButton { + @Element() el: HTMLButtonElement + + @Prop() label: string + @Prop() class?: string + + render() { + const declaredProps = ['label', 'onClick', 'class'] + const buttonProps = getNonExplicitAttributes(this.el, declaredProps) + + return ( + + + + ) + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md new file mode 100644 index 00000000..0b06381e --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md @@ -0,0 +1,31 @@ +# orama-chat-button + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ----------- | +| `class` | `class` | | `string` | `undefined` | +| `label` | `label` | | `string` | `undefined` | + + +## Dependencies + +### Used by + + - [orama-search](../orama-search) + +### Graph +```mermaid +graph TD; + orama-search --> orama-chat-button + style orama-chat-button fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index ccf08feb..8f8d730b 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -40,6 +40,11 @@ export class OramaSearch { labelForScreenReaders="Search..." placeholder="Search..." /> + alert('Chat clicked')} + onKeyPress={() => alert('Chat key pressed')} + />
orama-input + orama-search --> orama-chat-button orama-search --> orama-facets orama-search --> orama-search-results orama-search-results --> orama-text diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index a9b924fd..62f3639d 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -4,12 +4,11 @@ left: 0; width: 100%; height: 100%; - background-color: var(--backdrop-color-primary, palette('backdrop', 'primary')); } .inner-container { display: flex; - background-color: var(--background-color-primary, background('primary')); + background-color: var(--background-color-secondary, background('seconday')); position: fixed; inset: 0; z-index: 1000; 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 81eefc14..6ca6cee3 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,14 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `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; red: 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; "--backdrop-color-primary": 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; "--backdrop-background-color-primary": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `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; "--backdrop-color-primary": 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; "--backdrop-background-color-primary": string; }; }>; }` | `undefined` | ## Dependencies @@ -34,6 +34,7 @@ graph TD; orama-navigation-bar --> orama-button orama-navigation-bar --> orama-toggler orama-search --> orama-input + orama-search --> orama-chat-button orama-search --> orama-facets orama-search --> orama-search-results orama-search-results --> orama-text From 0daa870b4e0d3c0754f17ff7f4888f38d38808ed Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 14:30:13 +0200 Subject: [PATCH 06/19] feat: add summary btn animation and icons --- .../public/orama-search-box.stories.tsx | 2 +- packages/ui-stencil-vue/lib/components.ts | 2 + packages/ui-stencil/src/components.d.ts | 4 ++ .../src/components/internal/icons.tsx | 37 +++++++++++ .../orama-chat-button/orama-chat-button.scss | 61 ++++++++++++++++++- .../orama-chat-button/orama-chat-button.tsx | 24 +++++++- .../internal/orama-chat-button/readme.md | 10 +-- .../components/internal/orama-chat/readme.md | 2 +- .../orama-navigation-bar.scss | 2 +- .../internal/orama-search/orama-search.scss | 6 ++ .../internal/orama-search/orama-search.tsx | 2 + .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 3 +- .../src/components/orama-search-box/readme.md | 2 +- packages/ui-stencil/src/styles/_mixins.scss | 1 - 15 files changed, 145 insertions(+), 15 deletions(-) create mode 100644 packages/ui-stencil/src/components/internal/icons.tsx diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx index a2cf8a26..c01b2e91 100644 --- a/apps/storybook/stories/public/orama-search-box.stories.tsx +++ b/apps/storybook/stories/public/orama-search-box.stories.tsx @@ -5,7 +5,6 @@ type Story = StoryObj const meta: Meta = { title: 'Components/SearchBox', component: 'orama-search-box', - tags: ['autodocs'], argTypes: { colorScheme: { options: ['light', 'dark', 'system'], @@ -36,6 +35,7 @@ export const SearchBox: Story = { resultMap: { description: 'title', }, + colorScheme: 'dark', themeConfig: { colors: { light: { diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 3cd2ac8b..e3457507 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -41,6 +41,8 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer('ora export const OramaChatButton = /*@__PURE__*/ defineContainer('orama-chat-button', undefined, [ 'label', + 'active', + 'highlight', 'class' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index a10616ec..cad37cf1 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -46,7 +46,9 @@ export namespace Components { "sourcesMap"?: SourcesMap; } interface OramaChatButton { + "active"?: boolean; "class"?: string; + "highlight"?: boolean; "label": string; } interface OramaChatMessagesContainer { @@ -340,7 +342,9 @@ declare namespace LocalJSX { "sourcesMap"?: SourcesMap; } interface OramaChatButton { + "active"?: boolean; "class"?: string; + "highlight"?: boolean; "label"?: string; } interface OramaChatMessagesContainer { diff --git a/packages/ui-stencil/src/components/internal/icons.tsx b/packages/ui-stencil/src/components/internal/icons.tsx new file mode 100644 index 00000000..d2b238fe --- /dev/null +++ b/packages/ui-stencil/src/components/internal/icons.tsx @@ -0,0 +1,37 @@ +import { type FunctionalComponent, h } from '@stencil/core' + +interface IconProps { + name: string + size?: number + color?: string +} + +export const Icon: FunctionalComponent = ({ name, size = 24, color = 'black' }) => { + const getIconSvg = (iconName: string) => { + const icons: { [key: string]: string } = { + star: ` + + + + + + + + `, + } + return icons[iconName] || '' + } + + return ( +
+ ) +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss index 570a5db4..80f3694b 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -1,5 +1,13 @@ +@keyframes shine { + to { + background-position: 200% center; + opacity: 0; + } +} + :host { padding: var(--spacing-s, $spacing-s); + border-bottom: 1px solid var(--border-color-primary, border-color('primary')); } .chat-button { @@ -12,11 +20,60 @@ cursor: pointer; border-radius: var(--spacing-s, $spacing-s); border: 1px solid transparent; - background-color: transparent; + background: transparent; + position: relative; @media (hover: hover) { &:hover { - background-color: var(--background-color-tertiary, background-color('tertiary')); + background: var(--background-color-tertiary, background-color('tertiary')); + } + } + + &.is-active { + background: var(--background-color-tertiary, background-color('tertiary')); + } + + &.is-highlighted { + background: var(--background-color-tertiary, background-color('tertiary')); + + // TODO: this should be tokenized + --gradient-color: var(--background-color-tertiary, background-color('tertiary')); + --gradient-color-2: var(--background-color-tertiary, background-color('tertiary')); + --gradient-color-3: var(--text-color-accent, text-color('accent')); + --gradient-color-4: var(--text-color-accent, text-color('accent')); + --gradient-color-5: var(--background-color-tertiary, background-color('tertiary')); + --gradient-color-6: var(--background-color-tertiary, background-color('tertiary')); + + &::before, + &:after { + content: ''; + position: absolute; + display: block; + border-radius: var(--spacing-s, $spacing-s); + top: -2px; + left: -2px; + z-index: -1; + height: calc(100% + 4px); + width: calc(100% + 4px); + overflow: hidden; + background: linear-gradient( + to right, + var(--gradient-color) 20%, + var(--gradient-color-2) 40%, + var(--gradient-color-3) 50%, + var(--gradient-color-4) 55%, + var(--gradient-color-5) 70%, + var(--gradient-color-6) 100% + ); + background-size: 200% auto; + + animation: shine 1.5s linear 1 forwards; + } + + &:after { + filter: blur(3px); + width: 100%; + height: 100%; } } } diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx index 053adc62..73419a4c 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx @@ -1,4 +1,5 @@ -import { Component, Prop, h, Element, Host } from '@stencil/core' +import { Component, Prop, h, Element, Host, Watch } from '@stencil/core' +import { Icon } from '@/components/internal/icons' import { getNonExplicitAttributes } from '@/utils/utils' @Component({ @@ -13,15 +14,34 @@ export class OramaChatButton { @Element() el: HTMLButtonElement @Prop() label: string + @Prop() active?: boolean = false + @Prop() highlight?: boolean = false @Prop() class?: string + @Watch('active') + @Watch('highlight') + highlightButton() { + if (this.active && !this.highlight) { + this.highlight = true + } + } + render() { const declaredProps = ['label', 'onClick', 'class'] const buttonProps = getNonExplicitAttributes(this.el, declaredProps) return ( - diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md index 0b06381e..9c85f81d 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/readme.md @@ -7,10 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------- | ----------- | -| `class` | `class` | | `string` | `undefined` | -| `label` | `label` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ----------- | --------- | ----------- | +| `active` | `active` | | `boolean` | `false` | +| `class` | `class` | | `string` | `undefined` | +| `highlight` | `highlight` | | `boolean` | `false` | +| `label` | `label` | | `string` | `undefined` | ## Dependencies 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 5cb696c5..df6495b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -12,7 +12,7 @@ | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss index 56619fab..21ec9dde 100644 --- a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss +++ b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; padding: var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l); - background-color: var(--background-color-primary, background-color('primary')); + background-color: var(--background-color-secondary, background-color('secondary')); @media (--md-min) { display: none; diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss index 73e62a0f..42357289 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss @@ -33,3 +33,9 @@ orama-input { border-radius: var(--border-radius-l, $radius-l); } } + +.chat-button { + @media (--md-max) { + display: none; + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index 8f8d730b..c4d762bd 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -41,7 +41,9 @@ export class OramaSearch { placeholder="Search..." /> alert('Chat clicked')} onKeyPress={() => alert('Chat key pressed')} /> 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 eaafcc60..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 62f3639d..59a09b23 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -4,11 +4,12 @@ left: 0; width: 100%; height: 100%; + background-color: var(--backdrop-color-primary, palette('backdrop', 'primary')); } .inner-container { display: flex; - background-color: var(--background-color-secondary, background('seconday')); + background-color: var(--background-color-secondary, background('secondary')); position: fixed; inset: 0; z-index: 1000; 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 6ca6cee3..9d90ebce 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 @@ | `facetProperty` | `facet-property` | | `string` | `undefined` | | `index` | -- | | `{ api_key: string; endpoint: 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<{ 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; "--backdrop-color-primary": 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; "--backdrop-background-color-primary": string; }; }>; }` | `undefined` | diff --git a/packages/ui-stencil/src/styles/_mixins.scss b/packages/ui-stencil/src/styles/_mixins.scss index d74d0a7f..f61d1c8c 100644 --- a/packages/ui-stencil/src/styles/_mixins.scss +++ b/packages/ui-stencil/src/styles/_mixins.scss @@ -57,7 +57,6 @@ font-weight: var(--font-weight-normal, $font-weight-normal); margin: 0; padding: 0; - transform: translate(0, 0); @media (--sm-min) { font-size: var(--font-size-sm, $font-size-sm); From eaa76feaed7d4421fde3f7324bf99c9e50970240 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 16:25:26 +0200 Subject: [PATCH 07/19] style: add tokens for chat button --- .../stories/public/orama-chat-box.stories.tsx | 1 - .../public/orama-search-button.stories.tsx | 1 - .../orama-chat-button/orama-chat-button.scss | 58 +++++++++++++------ .../orama-chat-button/orama-chat-button.tsx | 4 +- .../components/internal/orama-chat/readme.md | 2 +- .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 2 +- .../src/components/orama-search-box/readme.md | 16 ++--- packages/ui-stencil/src/config/colors.ts | 20 ++++++- packages/ui-stencil/src/styles/_colors.scss | 29 +++++++++- packages/ui-stencil/src/styles/_radius.scss | 6 +- 11 files changed, 104 insertions(+), 37 deletions(-) diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx index 0994f1a7..eaeda199 100644 --- a/apps/storybook/stories/public/orama-chat-box.stories.tsx +++ b/apps/storybook/stories/public/orama-chat-box.stories.tsx @@ -19,7 +19,6 @@ const demoIndexes = { const meta: Meta = { title: 'Components/ChatBox', component: 'orama-chat-box', - tags: ['autodocs'], argTypes: { index: { options: Object.keys(demoIndexes), diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx index 15442e72..4520958e 100644 --- a/apps/storybook/stories/public/orama-search-button.stories.tsx +++ b/apps/storybook/stories/public/orama-search-button.stories.tsx @@ -4,7 +4,6 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/SearchButton', component: 'orama-search-button', - tags: ['autodocs'], } satisfies Meta export default meta diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss index 80f3694b..803b60a8 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -5,6 +5,18 @@ } } +@keyframes steam { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 75% 50%; + } + 100% { + background-position: 0% 50%; + } +} + :host { padding: var(--spacing-s, $spacing-s); border-bottom: 1px solid var(--border-color-primary, border-color('primary')); @@ -29,21 +41,16 @@ } } + &:focus-visible { + outline: none; + border: 1px solid var(--border-color-accent, border-color('accent')); + } + &.is-active { background: var(--background-color-tertiary, background-color('tertiary')); } &.is-highlighted { - background: var(--background-color-tertiary, background-color('tertiary')); - - // TODO: this should be tokenized - --gradient-color: var(--background-color-tertiary, background-color('tertiary')); - --gradient-color-2: var(--background-color-tertiary, background-color('tertiary')); - --gradient-color-3: var(--text-color-accent, text-color('accent')); - --gradient-color-4: var(--text-color-accent, text-color('accent')); - --gradient-color-5: var(--background-color-tertiary, background-color('tertiary')); - --gradient-color-6: var(--background-color-tertiary, background-color('tertiary')); - &::before, &:after { content: ''; @@ -58,12 +65,12 @@ overflow: hidden; background: linear-gradient( to right, - var(--gradient-color) 20%, - var(--gradient-color-2) 40%, - var(--gradient-color-3) 50%, - var(--gradient-color-4) 55%, - var(--gradient-color-5) 70%, - var(--gradient-color-6) 100% + var(--chat-button-border-color-gradientOne, palette('chat-button-border', 'gradientOne')) 0%, + var(--chat-button-border-color-gradientTwo, palette('chat-button-border', 'gradientTwo')) 20%, + var(--chat-button-border-color-gradientThree, palette('chat-button-border', 'gradientThree')) 40%, + var(--chat-button-border-color-gradientFour, palette('chat-button-border', 'gradientFour')) 60%, + var(--chat-button-border-color-gradientFive, palette('chat-button-border', 'gradientFive')) 80%, + var(--chat-button-border-color-gradientSix, palette('chat-button-border', 'gradientSix')) 100% ); background-size: 200% auto; @@ -71,9 +78,26 @@ } &:after { - filter: blur(3px); + filter: blur(4px); width: 100%; height: 100%; } } } + +.icon { + display: flex; + padding: var(--spacing-s, $spacing-s); + align-items: center; + border-radius: var(--radius-xs, $radius-xs); + background: linear-gradient( + 79deg, + var(--chat-button-background-color-gradientOne, palette('chat-button-background', 'gradientOne')) -45%, + var(--chat-button-backgroun-color-gradientTwo, palette('chat-button-background', 'gradientTwo')) 75% + ); + background-size: 200% auto; + + .is-highlighted & { + animation: steam 1.5s linear 1 forwards; + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx index 73419a4c..088404e4 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx @@ -41,7 +41,9 @@ export class OramaChatButton { {...buttonProps} type="button" > - + + + {this.label} 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 df6495b3..5cb696c5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -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 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 21dfcac5..eaafcc60 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 59a09b23..bfbc88f0 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -4,7 +4,7 @@ left: 0; width: 100%; height: 100%; - background-color: var(--backdrop-color-primary, palette('backdrop', 'primary')); + background-color: var(--backdrop-background-color-primary, palette('backdrop-background', 'primary')); } .inner-container { 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 9d90ebce..5a90dd65 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,14 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `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; }` | `{}` | -| `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; "--backdrop-color-primary": 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; "--backdrop-background-color-primary": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `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; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": 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; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts index e797ff4d..39cc32e9 100644 --- a/packages/ui-stencil/src/config/colors.ts +++ b/packages/ui-stencil/src/config/colors.ts @@ -42,7 +42,15 @@ export default { "--button-text-color-inactive": "#99989d", "--button-background-color-primary": "#8152ee", "--button-background-color-inactive": "#efefef", - "--backdrop-color-primary": "rgba(0, 0, 0, 0.7)" + "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)", + "--chat-button-border-color-gradientOne": "#eee9f6", + "--chat-button-border-color-gradientTwo": "#eee9f6", + "--chat-button-border-color-gradientThree": "#ae8ff7", + "--chat-button-border-color-gradientFour": "#ae8ff7", + "--chat-button-border-color-gradientFive": "#eee9f6", + "--chat-button-border-color-gradientSix": "#eee9f6", + "--chat-button-background-color-gradientOne": "#8152ee", + "--chat-button-background-color-gradientTwo": "rgba(225, 225, 225, 0)" }, "dark": { "--text-color-primary": "#fbfbfb", @@ -68,6 +76,14 @@ export default { "--shadow-color-primary": "black", "--button-text-color-primary": "#efefef", "--button-background-color-primary": "#432d77", - "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)" + "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)", + "--chat-button-border-color-gradientOne": "#212121", + "--chat-button-border-color-gradientTwo": "#212121", + "--chat-button-border-color-gradientThree": "#ae8ff7", + "--chat-button-border-color-gradientFour": "#ae8ff7", + "--chat-button-border-color-gradientFive": "#212121", + "--chat-button-border-color-gradientSix": "#212121", + "--chat-button-background-color-gradientOne": "#8152ee", + "--chat-button-background-color-gradientTwo": "rgba(106, 75, 178, 0)" } }; \ No newline at end of file diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index fffd7968..5ea02cde 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/packages/ui-stencil/src/styles/_colors.scss @@ -1,5 +1,5 @@ /* -!IMPORTANT: Make sure to also run 'pnpm convert-scss-to-js' if you make changes to this file +!IMPORTANT: Make sure to also run 'pnpm convert-scss-to-js' if you make changes to this file to make sure the changes are reflected in storybook as well TODO: We'll make this task automatic in the future */ @@ -21,6 +21,7 @@ $purple100: #f7f6f9; $purple200: #eee9f6; $purple300: #ae8ff7; $purple500: #8152ee; +$purple600: #6a4bb2; $purple700: #432d77; /** @@ -74,9 +75,21 @@ $palette: ( inactive: $gray100, // todo: value to check with Angela ), - 'backdrop': ( + 'backdrop-background': ( primary: rgba(black, 0.7), ), + 'chat-button-border': ( + gradientOne: $purple200, + gradientTwo: $purple200, + gradientThree: $purple300, + gradientFour: $purple300, + gradientFive: $purple200, + gradientSix: $purple200, + ), + 'chat-button-background': ( + gradientOne: $purple300, + gradientTwo: rgba(255, 255, 255, 0), + ), ); /** @@ -123,4 +136,16 @@ $paletteDark: ( 'backdrop-background': ( primary: rgba(black, 0.7), ), + 'chat-button-border': ( + gradientOne: $gray800, + gradientTwo: $gray800, + gradientThree: $purple300, + gradientFour: $purple300, + gradientFive: $gray800, + gradientSix: $gray800, + ), + 'chat-button-background': ( + gradientOne: $purple600, + gradientTwo: rgba(106, 75, 178, 0), + ), ); diff --git a/packages/ui-stencil/src/styles/_radius.scss b/packages/ui-stencil/src/styles/_radius.scss index 606c04f6..e46d1974 100644 --- a/packages/ui-stencil/src/styles/_radius.scss +++ b/packages/ui-stencil/src/styles/_radius.scss @@ -1,13 +1,15 @@ $base: 8; +$radius-xs: pxToRem($base * 0.75); $radius-s: pxToRem($base); $radius-m: pxToRem($base * 1.5); $radius-l: pxToRem($base * 2); $radius-3xl: pxToRem($base * 5); $theme-radius: ( + '--radius-xs': $radius-xs, '--radius-s': $radius-s, '--radius-m': $radius-m, '--radius-l': $radius-l, - '--radius-3xl': $radius-3xl -) + '--radius-3xl': $radius-3xl, +); From d238df6c713e79dd3337542537b936c88fd3fdf1 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 17:23:47 +0200 Subject: [PATCH 08/19] style: add enter icon to summary btn --- .../orama-chat-button/orama-chat-button.scss | 18 +++++++- .../orama-chat-button/orama-chat-button.tsx | 8 +++- .../internal/orama-facets/orama-facets.scss | 4 ++ .../internal/orama-input/orama-input.scss | 4 +- .../internal/orama-search/orama-search.scss | 9 ++++ .../internal/orama-search/orama-search.tsx | 42 ++++++++++++------- 6 files changed, 63 insertions(+), 22 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss index 803b60a8..e56c6d37 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -78,14 +78,14 @@ } &:after { - filter: blur(4px); + filter: blur(3px); width: 100%; height: 100%; } } } -.icon { +.icon-star { display: flex; padding: var(--spacing-s, $spacing-s); align-items: center; @@ -101,3 +101,17 @@ animation: steam 1.5s linear 1 forwards; } } + +.icon-enter { + display: flex; + align-items: center; + padding: var(--spacing-xs, $spacing-xs); + border-radius: var(--radius-xs, $radius-xs); + border: 0.7px solid var(--border-color-primary, border-color('primary')); + justify-self: flex-end; +} + +.label { + flex-grow: 1; + text-align: left; +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx index 088404e4..95d8e977 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx @@ -1,6 +1,7 @@ import { Component, Prop, h, Element, Host, Watch } from '@stencil/core' import { Icon } from '@/components/internal/icons' import { getNonExplicitAttributes } from '@/utils/utils' +import '@phosphor-icons/webcomponents/dist/icons/PhArrowBendDownLeft.mjs' @Component({ tag: 'orama-chat-button', @@ -41,10 +42,13 @@ export class OramaChatButton { {...buttonProps} type="button" > - + - {this.label} + {this.label} + + + ) diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss index ff05ea29..6fb00400 100644 --- a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss +++ b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss @@ -15,6 +15,10 @@ height: 0em; background-color: transparent; } + + @media (--md-min) { + padding: var(--radius-l, $spacing-l) 0; + } } .facet-button { diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss index ec4e1706..45020691 100644 --- a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss +++ b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss @@ -22,7 +22,7 @@ orama-input { padding-right: var(--spacing-2xl, $spacing-2xl); @media (--md-min) { - padding-left: var(--spacing-2xl, $spacing-2xl); + padding-left: var(--spacing-3xl, $spacing-3xl); } } @@ -82,7 +82,7 @@ orama-input { .search-icon { display: none; position: absolute; - left: var(--spacing-m, $spacing-m); + left: var(--spacing-l, $spacing-l); top: 50%; transform: translate3d(0, -50%, 0); color: var(--icon-color-inactive, icon-color('inactive')); diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss index 42357289..fa10ebb7 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss @@ -32,6 +32,10 @@ orama-input { background-color: #b2b2b285; border-radius: var(--border-radius-l, $radius-l); } + + @media (--md-min) { + padding: 0 var(--spacing-m, $spacing-m); + } } .chat-button { @@ -39,3 +43,8 @@ orama-input { display: none; } } + +.search-form { + display: flex; + flex-direction: column; +} diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index c4d762bd..df71b46a 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -1,4 +1,4 @@ -import { Component, Host, Listen, State, Watch, h } from '@stencil/core' +import { Component, Host, Listen, State, Watch, h, Element } from '@stencil/core' import { searchState } from '@/context/searchContext' import type { SearchResult } from '@/types' @@ -7,6 +7,7 @@ import type { SearchResult } from '@/types' styleUrl: 'orama-search.scss', }) export class OramaSearch { + @Element() el: HTMLElement @State() searchValue = '' @State() selectedFacet = '' @@ -29,24 +30,33 @@ export class OramaSearch { this.searchValue = (e.target as HTMLInputElement).value } + handleSubmit = (e: Event) => { + e.preventDefault() + // trigger click on chat button + const chatButton = this.el.querySelector('orama-chat-button') as HTMLElement + chatButton.click() + } + render() { return ( - - alert('Chat clicked')} - onKeyPress={() => alert('Chat key pressed')} - /> +
+ + alert('Chat clicked')} + onKeyPress={() => alert('Chat key pressed')} + /> +
Date: Thu, 1 Aug 2024 18:13:29 +0200 Subject: [PATCH 09/19] feat: add slider container --- .../components/internal/orama-chat/readme.md | 2 +- .../internal/orama-search/orama-search.tsx | 10 ++++--- .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 27 ++++++++++++++++++- .../orama-search-box/orama-search-box.tsx | 7 +++++ .../src/components/orama-search-box/readme.md | 2 +- .../ui-stencil/src/context/GlobalContext.ts | 1 + .../ui-stencil/src/services/ChatService.ts | 1 - packages/ui-stencil/src/styles/_zindex.scss | 9 +++---- 9 files changed, 47 insertions(+), 14 deletions(-) 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 5cb696c5..df6495b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -12,7 +12,7 @@ | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index df71b46a..3720b65b 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -1,6 +1,7 @@ import { Component, Host, Listen, State, Watch, h, Element } from '@stencil/core' import { searchState } from '@/context/searchContext' import type { SearchResult } from '@/types' +import { globalContext } from '@/context/GlobalContext' @Component({ tag: 'orama-search', @@ -30,9 +31,12 @@ export class OramaSearch { this.searchValue = (e.target as HTMLInputElement).value } + onChatButtonClick = () => { + globalContext.showChat = true + } + handleSubmit = (e: Event) => { e.preventDefault() - // trigger click on chat button const chatButton = this.el.querySelector('orama-chat-button') as HTMLElement chatButton.click() } @@ -53,8 +57,8 @@ export class OramaSearch { active={!!this.searchValue} label={`${this.searchValue ? `${this.searchValue} - ` : ''}Get a summary`} class="chat-button" - onClick={() => alert('Chat clicked')} - onKeyPress={() => alert('Chat key pressed')} + onClick={this.onChatButtonClick} + onKeyPress={this.onChatButtonClick} />
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 eaafcc60..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index bfbc88f0..49b9c004 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -12,7 +12,7 @@ background-color: var(--background-color-secondary, background('secondary')); position: fixed; inset: 0; - z-index: 1000; + z-index: $zindex-search-modal; flex-direction: column; justify-content: space-between; &.hidden { @@ -48,3 +48,28 @@ flex-grow: 1; overflow: hidden; } + +.slide-container { + // should be a full screen container initially hidden, and then it slides from bottom to top when the chat button is clicked + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 95vh; + transform: translate3d(0, 100%, 0); + transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s; + background-color: white; + z-index: $zindex-slider-container; + border-radius: var(--radius-m, $radius-m); + border: 1px solid var(--border-color-primary, border-color('primary')); + background: var(--background-color-secondary, background('secondary')); + color: var(--text-color-primary, text-color('primary')); + + &.slide-up { + transform: translate3d(0, 0, 0); + } + + @media (--md-max) { + display: none; + } +} 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 1fb9e945..e38b6c38 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 @@ -143,6 +143,13 @@ export class SearchBox { Orama logo
*/}
+ {/* TODO: find a way to add orama-chat only once */} +
+ +
) } 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 5a90dd65..6bc27654 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 @@ | `facetProperty` | `facet-property` | | `string` | `undefined` | | `index` | -- | | `{ api_key: string; endpoint: 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<{ 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; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": 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; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | diff --git a/packages/ui-stencil/src/context/GlobalContext.ts b/packages/ui-stencil/src/context/GlobalContext.ts index 4ad4a3ef..42b8bb3d 100644 --- a/packages/ui-stencil/src/context/GlobalContext.ts +++ b/packages/ui-stencil/src/context/GlobalContext.ts @@ -3,6 +3,7 @@ import { createStore } from '@stencil/store' const { state: globalContext } = createStore({ open: false, selectedTab: 'search' as 'search' | 'chat', + showChat: false, }) export { globalContext } diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index edbeabfd..c25003ea 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -21,7 +21,6 @@ export class ChatService { this.answerSession = this.oramaClient.createAnswerSession({ events: { onStateChange: (state) => { - console.log('-----onStateChange', state) chatContext.interactions = state.map((interaction, index) => { let answerStatus = TAnswerStatus.loading diff --git a/packages/ui-stencil/src/styles/_zindex.scss b/packages/ui-stencil/src/styles/_zindex.scss index 7c38e938..44e3e8b1 100644 --- a/packages/ui-stencil/src/styles/_zindex.scss +++ b/packages/ui-stencil/src/styles/_zindex.scss @@ -1,7 +1,4 @@ -// $zindex: 'tag', 'menu', 'popoverSupport', 'header', 'configurator'; +$zindex: 'search-modal', 'slider-container'; -// $zindex-header: index($zindex, 'header') * 10; -// $zindex-popoverSupport: index($zindex, 'popoverSupport') * 10; -// $zindex-tag: index($zindex, 'tag') * 10; -// $zindex-menu: index($zindex, 'menu') * 10; -// $zindex-configurator: index($zindex, 'configurator') * 10; +$zindex-search-modal: index($zindex, 'search-modal') * 10; +$zindex-slider-container: index($zindex, 'slider-container') * 10; From ae3dbe3808aa5cbb475f040e748490b0a0cd05ae Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 1 Aug 2024 18:29:40 +0200 Subject: [PATCH 10/19] feat: setup open/close slider container --- .../internal/orama-button/readme.md | 2 ++ .../components/internal/orama-chat/readme.md | 2 +- .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 11 ++++++--- .../orama-search-box/orama-search-box.tsx | 23 +++++++++++++++---- .../src/components/orama-search-box/readme.md | 2 ++ 6 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md index 8d446c5e..cad8d3dc 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-button/readme.md @@ -24,6 +24,7 @@ - [orama-chat](../orama-chat) - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message) - [orama-navigation-bar](../orama-navigation-bar) + - [orama-search-box](../../orama-search-box) ### Graph ```mermaid @@ -31,6 +32,7 @@ graph TD; orama-chat --> orama-button orama-chat-assistent-message --> orama-button orama-navigation-bar --> orama-button + orama-search-box --> orama-button style orama-button fill:#f9f,stroke:#333,stroke-width:4px ``` 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 df6495b3..5cb696c5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -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 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 21dfcac5..eaafcc60 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 49b9c004..7f54d114 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -50,7 +50,6 @@ } .slide-container { - // should be a full screen container initially hidden, and then it slides from bottom to top when the chat button is clicked position: fixed; bottom: 0; left: 0; @@ -58,12 +57,12 @@ height: 95vh; transform: translate3d(0, 100%, 0); transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s; - background-color: white; z-index: $zindex-slider-container; border-radius: var(--radius-m, $radius-m); border: 1px solid var(--border-color-primary, border-color('primary')); - background: var(--background-color-secondary, background('secondary')); + background-color: var(--background-color-primary, background('primary')); color: var(--text-color-primary, text-color('primary')); + box-sizing: border-box; &.slide-up { transform: translate3d(0, 0, 0); @@ -73,3 +72,9 @@ display: none; } } + +.slide-container-inner { + width: 80%; + margin: 0 auto; + max-width: pxToRem(840); +} 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 e38b6c38..0722e6ff 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 @@ -143,12 +143,27 @@ export class SearchBox { Orama logo
*/}
+ {/* TODO: probabily we can use one state variable rather than showChat and selectedTab */} {/* TODO: find a way to add orama-chat only once */} + {globalContext.showChat && ( + { + globalContext.showChat = false + }} + onKeyDown={() => { + globalContext.showChat = false + }} + > + Close (placeholder) + + )}
- +
+ +
) 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 6bc27654..ef731e65 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -23,6 +23,7 @@ - [orama-navigation-bar](../internal/orama-navigation-bar) - [orama-search](../internal/orama-search) - [orama-chat](../internal/orama-chat) +- [orama-button](../internal/orama-button) ### Graph ```mermaid @@ -31,6 +32,7 @@ graph TD; orama-search-box --> orama-navigation-bar orama-search-box --> orama-search orama-search-box --> orama-chat + orama-search-box --> orama-button orama-navigation-bar --> orama-button orama-navigation-bar --> orama-toggler orama-search --> orama-input From 8f44439c2b432a8c07f65d6636d76a50fcb8f53e Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 2 Aug 2024 08:37:59 +0200 Subject: [PATCH 11/19] feat: add close chat modal --- .../internal/orama-button/readme.md | 2 -- .../orama-chat-button/orama-chat-button.scss | 23 +++++++++++++++---- .../orama-search-box/orama-search-box.scss | 23 +++++++++++++++++++ .../orama-search-box/orama-search-box.tsx | 10 +++++--- .../src/components/orama-search-box/readme.md | 2 -- packages/ui-stencil/src/styles/_colors.scss | 2 +- 6 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md index cad8d3dc..8d446c5e 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-button/readme.md @@ -24,7 +24,6 @@ - [orama-chat](../orama-chat) - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message) - [orama-navigation-bar](../orama-navigation-bar) - - [orama-search-box](../../orama-search-box) ### Graph ```mermaid @@ -32,7 +31,6 @@ graph TD; orama-chat --> orama-button orama-chat-assistent-message --> orama-button orama-navigation-bar --> orama-button - orama-search-box --> orama-button style orama-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss index e56c6d37..d2ae0995 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -1,10 +1,25 @@ @keyframes shine { + from { + background-position: 0% 50%; + } to { - background-position: 200% center; + background-position: 150% center; opacity: 0; } } +@keyframes animBg { + 0% { + background: var(--background-color-tertiary, background-color('tertiary')); + } + 70% { + background: var(--background-color-tertiary, background-color('tertiary')); + } + 100% { + background: transparent; + } +} + @keyframes steam { 0% { background-position: 0% 50%; @@ -72,9 +87,9 @@ var(--chat-button-border-color-gradientFive, palette('chat-button-border', 'gradientFive')) 80%, var(--chat-button-border-color-gradientSix, palette('chat-button-border', 'gradientSix')) 100% ); - background-size: 200% auto; + background-size: 150% auto; - animation: shine 1.5s linear 1 forwards; + animation: shine 1.2s linear 1 forwards; } &:after { @@ -98,7 +113,7 @@ background-size: 200% auto; .is-highlighted & { - animation: steam 1.5s linear 1 forwards; + animation: steam 1.2s linear 1 forwards; } } diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 7f54d114..813f2629 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -1,3 +1,14 @@ +@keyframes showIn { + 0% { + opacity: 0; + transform: translateY(-25%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + :host { position: fixed; top: 0; @@ -78,3 +89,15 @@ margin: 0 auto; max-width: pxToRem(840); } + +.close-button { + position: fixed; + right: pxToRem(120); + top: 1vh; + cursor: pointer; + border: 0; + background-color: transparent; + color: var(--icon-color-primary, icon-color('primary')); + opacity: 0; + animation: showIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards; +} 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 0722e6ff..08732416 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 @@ -8,6 +8,7 @@ import type { TThemeOverrides } from '@/config/theme' import { initOramaClient } from '@/utils/utils' import type { ResultMap } from '@/types' import type { CloudIndexConfig } from '@/types' +import '@phosphor-icons/webcomponents/dist/icons/PhX.mjs' @Component({ tag: 'orama-search-box', @@ -146,16 +147,19 @@ export class SearchBox { {/* TODO: probabily we can use one state variable rather than showChat and selectedTab */} {/* TODO: find a way to add orama-chat only once */} {globalContext.showChat && ( - { globalContext.showChat = false }} onKeyDown={() => { globalContext.showChat = false }} + type="button" + class="close-button" + aria-label="Close chat" > - Close (placeholder) - + + )}
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 ef731e65..6bc27654 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -23,7 +23,6 @@ - [orama-navigation-bar](../internal/orama-navigation-bar) - [orama-search](../internal/orama-search) - [orama-chat](../internal/orama-chat) -- [orama-button](../internal/orama-button) ### Graph ```mermaid @@ -32,7 +31,6 @@ graph TD; orama-search-box --> orama-navigation-bar orama-search-box --> orama-search orama-search-box --> orama-chat - orama-search-box --> orama-button orama-navigation-bar --> orama-button orama-navigation-bar --> orama-toggler orama-search --> orama-input diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index 5ea02cde..edbb9221 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/packages/ui-stencil/src/styles/_colors.scss @@ -140,7 +140,7 @@ $paletteDark: ( gradientOne: $gray800, gradientTwo: $gray800, gradientThree: $purple300, - gradientFour: $purple300, + gradientFour: $purple500, gradientFive: $gray800, gradientSix: $gray800, ), From 774121427b9905921761af22500d08d87e15bd29 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 2 Aug 2024 09:21:12 +0200 Subject: [PATCH 12/19] feat: add footer --- .../src/components/stencil-generated/index.ts | 1 + packages/ui-stencil-vue/lib/components.ts | 6 ++++ packages/ui-stencil/src/components.d.ts | 25 ++++++++++--- .../orama-chat-button/orama-chat-button.scss | 4 +-- .../components/internal/orama-chat/readme.md | 2 +- .../internal/orama-footer/orama-footer.scss | 24 +++++++++++++ .../internal/orama-footer/orama-footer.tsx | 32 +++++++++++++++++ .../internal/orama-footer/readme.md | 36 +++++++++++++++++++ .../components/internal/orama-text/readme.md | 2 ++ .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 8 +++++ .../orama-search-box/orama-search-box.tsx | 15 ++++---- .../src/components/orama-search-box/readme.md | 3 ++ packages/ui-stencil/src/types/index.ts | 2 ++ 14 files changed, 145 insertions(+), 17 deletions(-) create mode 100644 packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss create mode 100644 packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx create mode 100644 packages/ui-stencil/src/components/internal/orama-footer/readme.md 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 82f5802f..8b27fc08 100644 --- a/packages/ui-stencil-react/src/components/stencil-generated/index.ts +++ b/packages/ui-stencil-react/src/components/stencil-generated/index.ts @@ -17,6 +17,7 @@ export const OramaChatSuggestions = /*@__PURE__*/createReactComponent('orama-chat-user-message'); export const OramaDotsLoader = /*@__PURE__*/createReactComponent('orama-dots-loader'); export const OramaFacets = /*@__PURE__*/createReactComponent('orama-facets'); +export const OramaFooter = /*@__PURE__*/createReactComponent('orama-footer'); export const OramaInput = /*@__PURE__*/createReactComponent('orama-input'); export const OramaLogoIcon = /*@__PURE__*/createReactComponent('orama-logo-icon'); export const OramaMarkdown = /*@__PURE__*/createReactComponent('orama-markdown'); diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index e3457507..2ca887ab 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -73,6 +73,12 @@ export const OramaFacets = /*@__PURE__*/ defineContainer('orama ]); +export const OramaFooter = /*@__PURE__*/ defineContainer('orama-footer', undefined, [ + 'class', + 'colorScheme' +]); + + export const OramaInput = /*@__PURE__*/ defineContainer('orama-input', undefined, [ 'name', 'size', diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index cad37cf1..be5a9e3f 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -6,7 +6,7 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { ButtonProps } from "./components/internal/orama-button/orama-button"; -import { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +import { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; import { TChatInteraction } from "./context/chatContext"; import { Facet } from "./components/internal/orama-facets/orama-facets"; import { InputProps } from "./components/internal/orama-input/orama-input"; @@ -14,7 +14,7 @@ import { TThemeOverrides } from "./config/theme"; import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; import { TextProps } from "./components/internal/orama-text/orama-text"; export { ButtonProps } from "./components/internal/orama-button/orama-button"; -export { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +export { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; export { TChatInteraction } from "./context/chatContext"; export { Facet } from "./components/internal/orama-facets/orama-facets"; export { InputProps } from "./components/internal/orama-input/orama-input"; @@ -68,6 +68,10 @@ export namespace Components { "facets": Facet[]; "selectedFacet": string; } + interface OramaFooter { + "class"?: string; + "colorScheme"?: ColorScheme; + } interface OramaInput { "defaultValue": InputProps['defaultValue']; "label"?: InputProps['label']; @@ -88,7 +92,7 @@ export namespace Components { interface OramaSearch { } interface OramaSearchBox { - "colorScheme"?: 'dark' | 'light' | 'system'; + "colorScheme"?: ColorScheme; "facetProperty"?: string; "index": CloudIndexConfig; "open"?: boolean; @@ -205,6 +209,12 @@ declare global { prototype: HTMLOramaFacetsElement; new (): HTMLOramaFacetsElement; }; + interface HTMLOramaFooterElement extends Components.OramaFooter, HTMLStencilElement { + } + var HTMLOramaFooterElement: { + prototype: HTMLOramaFooterElement; + new (): HTMLOramaFooterElement; + }; interface HTMLOramaInputElementEventMap { "oramaInputChanged": string; } @@ -304,6 +314,7 @@ declare global { "orama-chat-user-message": HTMLOramaChatUserMessageElement; "orama-dots-loader": HTMLOramaDotsLoaderElement; "orama-facets": HTMLOramaFacetsElement; + "orama-footer": HTMLOramaFooterElement; "orama-input": HTMLOramaInputElement; "orama-logo-icon": HTMLOramaLogoIconElement; "orama-markdown": HTMLOramaMarkdownElement; @@ -364,6 +375,10 @@ declare namespace LocalJSX { "facets"?: Facet[]; "selectedFacet"?: string; } + interface OramaFooter { + "class"?: string; + "colorScheme"?: ColorScheme; + } interface OramaInput { "defaultValue"?: InputProps['defaultValue']; "label"?: InputProps['label']; @@ -385,7 +400,7 @@ declare namespace LocalJSX { interface OramaSearch { } interface OramaSearchBox { - "colorScheme"?: 'dark' | 'light' | 'system'; + "colorScheme"?: ColorScheme; "facetProperty"?: string; "index"?: CloudIndexConfig; "open"?: boolean; @@ -444,6 +459,7 @@ declare namespace LocalJSX { "orama-chat-user-message": OramaChatUserMessage; "orama-dots-loader": OramaDotsLoader; "orama-facets": OramaFacets; + "orama-footer": OramaFooter; "orama-input": OramaInput; "orama-logo-icon": OramaLogoIcon; "orama-markdown": OramaMarkdown; @@ -471,6 +487,7 @@ declare module "@stencil/core" { "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes; "orama-dots-loader": LocalJSX.OramaDotsLoader & JSXBase.HTMLAttributes; "orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes; + "orama-footer": LocalJSX.OramaFooter & JSXBase.HTMLAttributes; "orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes; "orama-logo-icon": LocalJSX.OramaLogoIcon & JSXBase.HTMLAttributes; "orama-markdown": LocalJSX.OramaMarkdown & JSXBase.HTMLAttributes; diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss index d2ae0995..921a0317 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.scss @@ -89,7 +89,7 @@ ); background-size: 150% auto; - animation: shine 1.2s linear 1 forwards; + animation: shine 1s linear 1 forwards; } &:after { @@ -113,7 +113,7 @@ background-size: 200% auto; .is-highlighted & { - animation: steam 1.2s linear 1 forwards; + animation: steam 1.4s linear 1 forwards; } } 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 5cb696c5..df6495b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -12,7 +12,7 @@ | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss new file mode 100644 index 00000000..fa115e1b --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss @@ -0,0 +1,24 @@ +.footer { + display: flex; + align-items: center; + padding: var(--spacing-m, $spacing-m); + justify-content: space-between; +} + +.powered-by { + display: flex; + align-items: flex-end; + text-align: right; + flex-grow: 1; + justify-content: right; + gap: var(--spacing-s, $spacing-s); +} + +.logo-link { + display: inline-flex; + align-items: center; +} + +.logo { + max-width: pxToRem(62); +} diff --git a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx new file mode 100644 index 00000000..59b95071 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx @@ -0,0 +1,32 @@ +import { Component, Prop, h, Element } from '@stencil/core' +import type { ColorScheme } from '@/types' + +@Component({ + tag: 'orama-footer', + styleUrl: 'orama-footer.scss', + shadow: true, +}) + +/** + * The orama-footer component is used to render a footer element with logo and keyboard shortcuts. + */ +export class OramaFooter { + @Element() el: HTMLElement + + @Prop() class?: string + @Prop() colorScheme?: ColorScheme = 'light' + + render() { + const imgName = this.colorScheme === 'dark' ? 'orama-when-dark.svg' : 'orama-when-light.svg' + return ( +
+
+ Powered by + + + +
+
+ ) + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-footer/readme.md b/packages/ui-stencil/src/components/internal/orama-footer/readme.md new file mode 100644 index 00000000..450f9755 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-footer/readme.md @@ -0,0 +1,36 @@ +# orama-footer + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | ----------- | ------------------------------- | ----------- | +| `class` | `class` | | `string` | `undefined` | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | + + +## Dependencies + +### Used by + + - [orama-search-box](../../orama-search-box) + +### Depends on + +- [orama-text](../orama-text) + +### Graph +```mermaid +graph TD; + orama-footer --> orama-text + orama-search-box --> orama-footer + style orama-footer fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* 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 cb0f9611..7d31c08e 100644 --- a/packages/ui-stencil/src/components/internal/orama-text/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-text/readme.md @@ -22,6 +22,7 @@ - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message) - [orama-chat-box](../../orama-chat-box) - [orama-chat-user-message](../orama-chat-messages-container/orama-chat-user-message) + - [orama-footer](../orama-footer) - [orama-search-box](../../orama-search-box) - [orama-search-results](../orama-search-results) @@ -32,6 +33,7 @@ graph TD; orama-chat-assistent-message --> orama-text orama-chat-box --> orama-text orama-chat-user-message --> orama-text + orama-footer --> 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 eaafcc60..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss index 813f2629..6579f9f3 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss @@ -60,6 +60,14 @@ overflow: hidden; } +.section-active { + display: flex; +} + +.section-inactive { + display: none; +} + .slide-container { position: fixed; bottom: 0; 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 08732416..6dc1b800 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 @@ -6,7 +6,7 @@ import { ChatService } from '@/services/ChatService' import { SearchService } from '@/services/SearchService' import type { TThemeOverrides } from '@/config/theme' import { initOramaClient } from '@/utils/utils' -import type { ResultMap } from '@/types' +import type { ColorScheme, ResultMap } from '@/types' import type { CloudIndexConfig } from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhX.mjs' @@ -19,7 +19,7 @@ export class SearchBox { @Element() el: HTMLElement @Prop() themeConfig?: Partial - @Prop() colorScheme?: 'dark' | 'light' | 'system' = 'light' + @Prop() colorScheme?: ColorScheme = 'light' @Prop() facetProperty?: string @Prop() open? = false @Prop() resultMap?: Partial = {} @@ -132,17 +132,14 @@ export class SearchBox {
- + + {/* TODO: add this only on mobile < 1024px */}
- {/* FOOTER - to replace with component */} - {/* TODO: Hidden footer for now */} - {/*
- Orama logo -
*/} +
{/* TODO: probabily we can use one state variable rather than showChat and selectedTab */} {/* TODO: find a way to add orama-chat only once */} 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 6bc27654..000cdafd 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -23,6 +23,7 @@ - [orama-navigation-bar](../internal/orama-navigation-bar) - [orama-search](../internal/orama-search) - [orama-chat](../internal/orama-chat) +- [orama-footer](../internal/orama-footer) ### Graph ```mermaid @@ -31,6 +32,7 @@ graph TD; orama-search-box --> orama-navigation-bar orama-search-box --> orama-search orama-search-box --> orama-chat + orama-search-box --> orama-footer orama-navigation-bar --> orama-button orama-navigation-bar --> orama-toggler orama-search --> orama-input @@ -51,6 +53,7 @@ graph TD; orama-chat-assistent-message --> orama-text orama-chat-assistent-message --> orama-markdown orama-chat-assistent-message --> orama-button + orama-footer --> orama-text style orama-search-box fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/ui-stencil/src/types/index.ts b/packages/ui-stencil/src/types/index.ts index 6577f496..dca2c3d9 100644 --- a/packages/ui-stencil/src/types/index.ts +++ b/packages/ui-stencil/src/types/index.ts @@ -5,6 +5,8 @@ export type SearchResult = { path: string } +export type ColorScheme = 'dark' | 'light' | 'system' + export type SearchResultWithScore = SearchResult & { score: number } export type SearchResultBySection = { From d1868ccbfc56ed7141425fc02d15cb61294393b9 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 2 Aug 2024 10:53:59 +0200 Subject: [PATCH 13/19] feat: add window service and update current task on resize --- .../components/internal/orama-chat/readme.md | 2 +- .../internal/orama-footer/orama-footer.scss | 4 +- .../internal/orama-footer/orama-footer.tsx | 6 +- .../internal/orama-input/orama-input.scss | 1 + .../orama-navigation-bar.scss | 2 +- .../internal/orama-search/orama-search.tsx | 2 +- .../internal/orama-toggler/orama-toggler.tsx | 8 +- .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.scss | 8 +- .../orama-search-box/orama-search-box.tsx | 83 +++++++++++-------- .../ui-stencil/src/context/GlobalContext.ts | 3 +- .../ui-stencil/src/services/ChatService.ts | 2 - .../ui-stencil/src/services/WindowService.ts | 24 ++++++ 13 files changed, 95 insertions(+), 52 deletions(-) create mode 100644 packages/ui-stencil/src/services/WindowService.ts 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 df6495b3..5cb696c5 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -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 diff --git a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss index fa115e1b..0e592e87 100644 --- a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss +++ b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.scss @@ -1,8 +1,10 @@ -.footer { +:host { display: flex; align-items: center; padding: var(--spacing-m, $spacing-m); justify-content: space-between; + background-color: var(--background-color-primary, background-color('primary')); + border-radius: 0 0 var(--radius-m, $radius-m) var(--radius-m, $radius-m); } .powered-by { diff --git a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx index 59b95071..59d5cc02 100644 --- a/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx +++ b/packages/ui-stencil/src/components/internal/orama-footer/orama-footer.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, Element } from '@stencil/core' +import { Component, Prop, h, Element, Host } from '@stencil/core' import type { ColorScheme } from '@/types' @Component({ @@ -19,14 +19,14 @@ export class OramaFooter { render() { const imgName = this.colorScheme === 'dark' ? 'orama-when-dark.svg' : 'orama-when-light.svg' return ( -
+
Powered by
-
+ ) } } diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss index 45020691..bde01897 100644 --- a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss +++ b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss @@ -23,6 +23,7 @@ orama-input { @media (--md-min) { padding-left: var(--spacing-3xl, $spacing-3xl); + background: var(--background-color-primary, background-color('primary')); } } diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss index 21ec9dde..56619fab 100644 --- a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss +++ b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; padding: var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l); - background-color: var(--background-color-secondary, background-color('secondary')); + background-color: var(--background-color-primary, background-color('primary')); @media (--md-min) { display: none; diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index 3720b65b..6c690e98 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -32,7 +32,7 @@ export class OramaSearch { } onChatButtonClick = () => { - globalContext.showChat = true + globalContext.currentTask = 'chat' } handleSubmit = (e: Event) => { diff --git a/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.tsx b/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.tsx index f6bbfda2..6e74ddbc 100644 --- a/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.tsx +++ b/packages/ui-stencil/src/components/internal/orama-toggler/orama-toggler.tsx @@ -29,10 +29,10 @@ export class OramaToggler { + {this.windowWidth > 1024 && ( + + {globalContext.currentTask === 'chat' && ( + + )} +
+
+ +
+
+ )} -
-
- -
-
) } diff --git a/packages/ui-stencil/src/context/GlobalContext.ts b/packages/ui-stencil/src/context/GlobalContext.ts index 42b8bb3d..ba469b3e 100644 --- a/packages/ui-stencil/src/context/GlobalContext.ts +++ b/packages/ui-stencil/src/context/GlobalContext.ts @@ -2,8 +2,7 @@ import { createStore } from '@stencil/store' const { state: globalContext } = createStore({ open: false, - selectedTab: 'search' as 'search' | 'chat', - showChat: false, + currentTask: 'search' as 'search' | 'chat', }) export { globalContext } diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index 677de504..ed7d94c3 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -83,11 +83,9 @@ export class ChatService { resetChat = async () => { console.log('resetChat') if (!this.answerSession) { - console.log('**+No answer session') throw new OramaClientNotInitializedError() } - console.log('>>>clear answer session') this.answerSession.clearSession() // TODO: Not sure if this is the right place to do it chatContext.lockScrollOnBottom = true diff --git a/packages/ui-stencil/src/services/WindowService.ts b/packages/ui-stencil/src/services/WindowService.ts new file mode 100644 index 00000000..49f9f6c8 --- /dev/null +++ b/packages/ui-stencil/src/services/WindowService.ts @@ -0,0 +1,24 @@ +export class WindowService extends EventTarget { + private _width: number + + constructor() { + super() + this._width = window.innerWidth + this.handleResize = this.handleResize.bind(this) + window.addEventListener('resize', this.handleResize) + } + + private handleResize() { + this._width = window.innerWidth + console.log('WindowService: handleResize', this._width) + this.dispatchEvent(new CustomEvent('widthChange', { detail: this._width })) + } + + get width() { + return this._width + } +} + +const windowWidthListener = new WindowService() + +export { windowWidthListener } From 8eb7bdbf12371774139a08da7bbc8829050f616b Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 2 Aug 2024 13:08:33 +0200 Subject: [PATCH 14/19] feat: set default chat value if search started --- packages/ui-stencil-vue/lib/components.ts | 3 ++- packages/ui-stencil/src/components.d.ts | 2 ++ .../components/internal/orama-chat/orama-chat.tsx | 13 +++++++++++++ .../src/components/internal/orama-chat/readme.md | 3 ++- .../internal/orama-search/orama-search.tsx | 1 + .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.tsx | 3 ++- packages/ui-stencil/src/context/GlobalContext.ts | 1 + packages/ui-stencil/src/services/WindowService.ts | 1 - 9 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 2ca887ab..dc7a126b 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -22,7 +22,8 @@ export const OramaChat = /*@__PURE__*/ defineContainer('orama-cha 'placeholder', 'sourceBaseUrl', 'sourcesMap', - 'showClearChat' + 'showClearChat', + 'defaultTerm' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index be5a9e3f..8f6fa642 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -31,6 +31,7 @@ export namespace Components { "withTooltip"?: string; } interface OramaChat { + "defaultTerm"?: string; "placeholder"?: string; "showClearChat"?: boolean; "sourceBaseUrl"?: string; @@ -338,6 +339,7 @@ declare namespace LocalJSX { "withTooltip"?: string; } interface OramaChat { + "defaultTerm"?: string; "placeholder"?: string; "showClearChat"?: boolean; "sourceBaseUrl"?: string; diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx index 54386939..be26e29e 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -4,6 +4,7 @@ import type { SourcesMap } from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhPaperPlaneTilt.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhStop.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhArrowDown.mjs' +import { globalContext } from '@/context/GlobalContext' // TODO: Hardcoding suggestions for now const SUGGESTIONS = [ @@ -23,7 +24,15 @@ export class OramaChat { @Prop() sourceBaseUrl?: string = '' @Prop() sourcesMap?: SourcesMap @Prop() showClearChat?: boolean = true + @Prop() defaultTerm?: string + @State() inputValue = '' + + @Watch('defaultTerm') + handleDefaultTermChange() { + this.inputValue = this.defaultTerm + } + messagesContainerRef!: HTMLElement isScrolling = false prevScrollTop = 0 @@ -97,6 +106,10 @@ export class OramaChat { this.recalculateLockOnBottom() } + componentWillLoad() { + this.inputValue = this.defaultTerm || '' + } + componentDidLoad() { this.messagesContainerRef.addEventListener('wheel', this.handleWheel) this.recalculateLockOnBottom() 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 5cb696c5..b2d69937 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -9,10 +9,11 @@ | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | +| `defaultTerm` | `default-term` | | `string` | `undefined` | | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index 6c690e98..15ed3ade 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -16,6 +16,7 @@ export class OramaSearch { @Watch('selectedFacet') handleSearchValueChange() { searchState.searchService.search(this.searchValue, this.selectedFacet) + globalContext.currentTerm = this.searchValue } onFacetClickHandler = (facetName: string) => { 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 eaafcc60..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies 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 dc3a33c1..a940cb3b 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 @@ -151,6 +151,7 @@ export class SearchBox { {this.windowWidth <= 1024 && ( )} @@ -176,7 +177,7 @@ export class SearchBox { )}
- +
diff --git a/packages/ui-stencil/src/context/GlobalContext.ts b/packages/ui-stencil/src/context/GlobalContext.ts index ba469b3e..7bda4428 100644 --- a/packages/ui-stencil/src/context/GlobalContext.ts +++ b/packages/ui-stencil/src/context/GlobalContext.ts @@ -3,6 +3,7 @@ import { createStore } from '@stencil/store' const { state: globalContext } = createStore({ open: false, currentTask: 'search' as 'search' | 'chat', + currentTerm: '', }) export { globalContext } diff --git a/packages/ui-stencil/src/services/WindowService.ts b/packages/ui-stencil/src/services/WindowService.ts index 49f9f6c8..b9b41845 100644 --- a/packages/ui-stencil/src/services/WindowService.ts +++ b/packages/ui-stencil/src/services/WindowService.ts @@ -10,7 +10,6 @@ export class WindowService extends EventTarget { private handleResize() { this._width = window.innerWidth - console.log('WindowService: handleResize', this._width) this.dispatchEvent(new CustomEvent('widthChange', { detail: this._width })) } From 7a457b3a11e6bac8925269e1a6e3ad687b9870cc Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 2 Aug 2024 14:13:05 +0200 Subject: [PATCH 15/19] feat: autofocus chat input --- packages/ui-stencil-vue/lib/components.ts | 3 ++- packages/ui-stencil/src/components.d.ts | 2 ++ .../internal/orama-chat/orama-chat.tsx | 19 +++++++++++++++++-- .../components/internal/orama-chat/readme.md | 1 + .../orama-textarea/orama-textarea.tsx | 11 +++++++++-- .../orama-search-box/orama-search-box.tsx | 7 ++++++- 6 files changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index dc7a126b..e0acba15 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -23,7 +23,8 @@ export const OramaChat = /*@__PURE__*/ defineContainer('orama-cha 'sourceBaseUrl', 'sourcesMap', 'showClearChat', - 'defaultTerm' + 'defaultTerm', + 'focusInput' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 8f6fa642..08bd848f 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -32,6 +32,7 @@ export namespace Components { } interface OramaChat { "defaultTerm"?: string; + "focusInput"?: boolean; "placeholder"?: string; "showClearChat"?: boolean; "sourceBaseUrl"?: string; @@ -340,6 +341,7 @@ declare namespace LocalJSX { } interface OramaChat { "defaultTerm"?: string; + "focusInput"?: boolean; "placeholder"?: string; "showClearChat"?: boolean; "sourceBaseUrl"?: string; diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx index be26e29e..8897c1db 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -4,7 +4,6 @@ import type { SourcesMap } from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhPaperPlaneTilt.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhStop.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhArrowDown.mjs' -import { globalContext } from '@/context/GlobalContext' // TODO: Hardcoding suggestions for now const SUGGESTIONS = [ @@ -25,6 +24,7 @@ export class OramaChat { @Prop() sourcesMap?: SourcesMap @Prop() showClearChat?: boolean = true @Prop() defaultTerm?: string + @Prop() focusInput?: boolean = false @State() inputValue = '' @@ -33,11 +33,24 @@ export class OramaChat { this.inputValue = this.defaultTerm } + @Watch('focusInput') + focusInputWatcher() { + this.handleFocus() + } + messagesContainerRef!: HTMLElement + textareaRef!: HTMLOramaTextareaElement isScrolling = false prevScrollTop = 0 scrollTarget = 0 + handleFocus = () => { + if (this.focusInput) { + console.log('focusInput') + this.textareaRef.focus() + } + } + isScrollOnBottom = () => { const scrollableHeight = this.messagesContainerRef.scrollHeight - this.messagesContainerRef.clientHeight @@ -108,6 +121,7 @@ export class OramaChat { componentWillLoad() { this.inputValue = this.defaultTerm || '' + this.handleFocus() } componentDidLoad() { @@ -202,7 +216,8 @@ export class OramaChat {
(this.textareaRef = ref)} + autoFocus={this.focusInput} maxRows={4} value={this.inputValue} onKeyDown={(e: KeyboardEvent) => { 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 b2d69937..75e50459 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -10,6 +10,7 @@ | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | | `defaultTerm` | `default-term` | | `string` | `undefined` | +| `focusInput` | `focus-input` | | `boolean` | `false` | | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx index 2a7e85ab..88c38eea 100644 --- a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx +++ b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx @@ -20,12 +20,20 @@ export class OramaTextarea { textarea!: HTMLTextAreaElement shadowTextarea!: HTMLTextAreaElement - componentDidLoad() {} + @Watch('autoFocus') + handleAutoFocusChange() { + if (this.autoFocus) { + this.textarea.focus() + } + } componetWillLoad() { this.startAdornmentWidth = this.getNamedSlotWidth('adornment-start') this.endAdornmentWidth = this.getNamedSlotWidth('adornment-end') this.syncHeight() + if (this.autoFocus) { + this.textarea.focus() + } } getNamedSlotWidth(slotName: string) { @@ -137,7 +145,6 @@ export class OramaTextarea {