From 591b6184b2fbe074a114ff1050b9c03fa9d462a6 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Mon, 29 Jul 2024 16:21:51 +0200 Subject: [PATCH 01/11] chore: bundle style for vue wrapper --- apps/demo-vue/src/App.vue | 5 ++++- apps/demo-vue/src/main.ts | 1 - packages/ui-stencil-vue/lib/index.ts | 4 ++++ packages/ui-stencil-vue/lib/plugin.ts | 12 ++++-------- packages/ui-stencil-vue/package.json | 4 ++-- 5 files changed, 14 insertions(+), 12 deletions(-) create mode 100644 packages/ui-stencil-vue/lib/index.ts diff --git a/apps/demo-vue/src/App.vue b/apps/demo-vue/src/App.vue index c2f2a85f..06a310e9 100644 --- a/apps/demo-vue/src/App.vue +++ b/apps/demo-vue/src/App.vue @@ -7,7 +7,10 @@

Stencil Components

- +
diff --git a/apps/demo-vue/src/main.ts b/apps/demo-vue/src/main.ts index 3bfe46e4..5a009381 100644 --- a/apps/demo-vue/src/main.ts +++ b/apps/demo-vue/src/main.ts @@ -1,5 +1,4 @@ import { createApp } from 'vue' -import './style.css' import { ComponentLibrary } from '@orama/vue-components' import App from './App.vue' diff --git a/packages/ui-stencil-vue/lib/index.ts b/packages/ui-stencil-vue/lib/index.ts new file mode 100644 index 00000000..5b28e5de --- /dev/null +++ b/packages/ui-stencil-vue/lib/index.ts @@ -0,0 +1,4 @@ +export { ComponentLibrary } from './plugin' +export * from './components' + +import '@orama/wc-components/dist/orama-ui/orama-ui.css' diff --git a/packages/ui-stencil-vue/lib/plugin.ts b/packages/ui-stencil-vue/lib/plugin.ts index 7c1f14d1..837186fc 100644 --- a/packages/ui-stencil-vue/lib/plugin.ts +++ b/packages/ui-stencil-vue/lib/plugin.ts @@ -1,13 +1,9 @@ -import type { Plugin } from 'vue' +import type { App, Plugin } from 'vue' import { defineCustomElements } from '@orama/wc-components/loader' +import { defineContainer } from './vue-component-lib/utils' export const ComponentLibrary: Plugin = { - async install() { - defineCustomElements() + install(app: App) { + defineContainer(null, defineCustomElements) }, } - -export * from './components' -export * from './plugin' - -import '@orama/wc-components/dist/orama-ui/orama-ui.css' diff --git a/packages/ui-stencil-vue/package.json b/packages/ui-stencil-vue/package.json index 090254bc..b1a114a0 100644 --- a/packages/ui-stencil-vue/package.json +++ b/packages/ui-stencil-vue/package.json @@ -4,14 +4,14 @@ "description": "Vue components for Orama Cloud", "license": "Apache-2.0", "author": "", - "main": "dist/plugin.js", + "main": "dist/index.js", "scripts": { "build": "npm run tsc", "clean": "rm -rf node_modules .turbo", "test": "echo \"Error: no test specified\" && exit 1", "tsc": "tsc -p ." }, - "types": "dist/plugin.d.ts", + "types": "dist/index.d.ts", "dependencies": { "@orama/wc-components": "workspace:*" }, From a0f725bccada651319ac12a5589f4cd4bf41a417 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Mon, 29 Jul 2024 16:50:16 +0200 Subject: [PATCH 02/11] chore: handle demo app angular --- apps/demo-angular/package.json | 2 +- apps/demo-angular/src/app/app.component.html | 10 ++++++---- apps/demo-angular/src/styles.css | 8 ++------ .../src/lib/component-library.module.ts | 6 +++--- .../projects/component-library/src/public-api.ts | 7 +++---- 5 files changed, 15 insertions(+), 18 deletions(-) diff --git a/apps/demo-angular/package.json b/apps/demo-angular/package.json index 6b3b088d..74a2b78a 100644 --- a/apps/demo-angular/package.json +++ b/apps/demo-angular/package.json @@ -6,7 +6,7 @@ "build": "ng build", "clean": "rm -rf node_modules .turbo dist", "ng": "ng", - "start": "ng serve", + "dev": "ng serve", "test": "ng test", "watch": "ng build --watch --configuration development" }, diff --git a/apps/demo-angular/src/app/app.component.html b/apps/demo-angular/src/app/app.component.html index 1bf25041..54d78aad 100644 --- a/apps/demo-angular/src/app/app.component.html +++ b/apps/demo-angular/src/app/app.component.html @@ -5,10 +5,12 @@

App Angular

Stencil Components

-
- -
+
diff --git a/apps/demo-angular/src/styles.css b/apps/demo-angular/src/styles.css index 97d65914..bb025f18 100644 --- a/apps/demo-angular/src/styles.css +++ b/apps/demo-angular/src/styles.css @@ -1,3 +1,5 @@ +@import '@orama/wc-components/dist/orama-ui/orama-ui.css'; + /* You can add global styles to this file, and also import other style files */ #root { background-color: #fff; @@ -116,9 +118,3 @@ h2 { section { margin-bottom: 1rem; } - -.component-row { - background-color: #ddd; - padding: 1rem; - border-radius: 1rem; -} diff --git a/packages/ui-stencil-angular/projects/component-library/src/lib/component-library.module.ts b/packages/ui-stencil-angular/projects/component-library/src/lib/component-library.module.ts index 11ec857f..05bbea69 100644 --- a/packages/ui-stencil-angular/projects/component-library/src/lib/component-library.module.ts +++ b/packages/ui-stencil-angular/projects/component-library/src/lib/component-library.module.ts @@ -1,6 +1,6 @@ -import { NgModule, APP_INITIALIZER } from '@angular/core'; -import { DIRECTIVES } from './stencil-generated'; -import { defineCustomElements } from '@orama/wc-components/loader'; +import { NgModule, APP_INITIALIZER } from '@angular/core' +import { DIRECTIVES } from './stencil-generated' +import { defineCustomElements } from '@orama/wc-components/loader' @NgModule({ declarations: [...DIRECTIVES], diff --git a/packages/ui-stencil-angular/projects/component-library/src/public-api.ts b/packages/ui-stencil-angular/projects/component-library/src/public-api.ts index 1fe3b2ef..15b94368 100644 --- a/packages/ui-stencil-angular/projects/component-library/src/public-api.ts +++ b/packages/ui-stencil-angular/projects/component-library/src/public-api.ts @@ -1,5 +1,4 @@ // public-api.ts - -export * from './lib/component-library.module'; -export { DIRECTIVES } from './lib/stencil-generated'; -export * from './lib/stencil-generated/components'; +export * from './lib/component-library.module' +export { DIRECTIVES } from './lib/stencil-generated' +export * from './lib/stencil-generated/components' From e73a40d0b9df8af024937af357d289560c710166 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Mon, 29 Jul 2024 18:20:56 +0200 Subject: [PATCH 03/11] docs: add autodocs to storybook --- apps/storybook/stories/internal/orama-button.stories.tsx | 1 + .../stories/internal/orama-chat-assistent-message.stories.tsx | 1 + .../stories/internal/orama-chat-messages-container.stories.tsx | 1 + .../stories/internal/orama-chat-suggestion.stories.tsx | 1 + apps/storybook/stories/internal/orama-chat.stories.tsx | 1 + apps/storybook/stories/internal/orama-dots-loader.stories.tsx | 1 + apps/storybook/stories/internal/orama-facets.stories.tsx | 1 + .../storybook/stories/internal/orama-navigation-bar.stories.tsx | 1 + .../storybook/stories/internal/orama-search-results.stories.tsx | 1 + apps/storybook/stories/internal/orama-search.stories.tsx | 1 + apps/storybook/stories/internal/orama-toggler.stories.tsx | 1 + apps/storybook/stories/public/orama-chat-box.stories.tsx | 1 + apps/storybook/stories/public/orama-search-box.stories.tsx | 1 + apps/storybook/stories/public/orama-search-button.stories.tsx | 1 + packages/ui-stencil/src/components/orama-search-box/readme.md | 2 +- packages/ui-stencil/src/styles/_themes.scss | 1 - packages/ui-stencil/src/types/index.ts | 2 ++ 17 files changed, 17 insertions(+), 2 deletions(-) diff --git a/apps/storybook/stories/internal/orama-button.stories.tsx b/apps/storybook/stories/internal/orama-button.stories.tsx index 1ba895fc..baceeabb 100644 --- a/apps/storybook/stories/internal/orama-button.stories.tsx +++ b/apps/storybook/stories/internal/orama-button.stories.tsx @@ -6,6 +6,7 @@ import { html } from 'lit-html' const meta: Meta = { title: 'Components/Internal/Button', component: 'orama-button', + tags: ['autodocs'], argTypes: { variant: { control: { type: 'select' }, diff --git a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx index 0cffd021..076f6cbb 100644 --- a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx +++ b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx @@ -5,6 +5,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/Chat', component: 'orama-chat-assistent-message', + tags: ['autodocs'], } satisfies Meta export default meta diff --git a/apps/storybook/stories/internal/orama-chat-messages-container.stories.tsx b/apps/storybook/stories/internal/orama-chat-messages-container.stories.tsx index a380e38e..d703b684 100644 --- a/apps/storybook/stories/internal/orama-chat-messages-container.stories.tsx +++ b/apps/storybook/stories/internal/orama-chat-messages-container.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/Chat', component: 'orama-chat-messages-container', + tags: ['autodocs'], } satisfies Meta export default meta diff --git a/apps/storybook/stories/internal/orama-chat-suggestion.stories.tsx b/apps/storybook/stories/internal/orama-chat-suggestion.stories.tsx index 47c214fd..7d5a74af 100644 --- a/apps/storybook/stories/internal/orama-chat-suggestion.stories.tsx +++ b/apps/storybook/stories/internal/orama-chat-suggestion.stories.tsx @@ -5,6 +5,7 @@ import { fn } from '@storybook/test' const meta: Meta = { title: 'Components/Internal/Chat', component: 'orama-chat-suggestions', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-chat.stories.tsx b/apps/storybook/stories/internal/orama-chat.stories.tsx index 1cce4a38..36f44577 100644 --- a/apps/storybook/stories/internal/orama-chat.stories.tsx +++ b/apps/storybook/stories/internal/orama-chat.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/Chat', component: 'orama-chat', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-dots-loader.stories.tsx b/apps/storybook/stories/internal/orama-dots-loader.stories.tsx index 1ad2be4b..92dc3104 100644 --- a/apps/storybook/stories/internal/orama-dots-loader.stories.tsx +++ b/apps/storybook/stories/internal/orama-dots-loader.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/DotsLoader', component: 'orama-dots-loader', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-facets.stories.tsx b/apps/storybook/stories/internal/orama-facets.stories.tsx index c6cde51d..d586e6a3 100644 --- a/apps/storybook/stories/internal/orama-facets.stories.tsx +++ b/apps/storybook/stories/internal/orama-facets.stories.tsx @@ -6,6 +6,7 @@ import { fn } from '@storybook/test' const meta: Meta = { title: 'Components/Internal/Facets', component: 'orama-facets', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-navigation-bar.stories.tsx b/apps/storybook/stories/internal/orama-navigation-bar.stories.tsx index 87ab7d8d..ae94657e 100644 --- a/apps/storybook/stories/internal/orama-navigation-bar.stories.tsx +++ b/apps/storybook/stories/internal/orama-navigation-bar.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/NavigationBar', component: 'orama-navigation-bar', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-search-results.stories.tsx b/apps/storybook/stories/internal/orama-search-results.stories.tsx index aff66ccb..fe5ccb48 100644 --- a/apps/storybook/stories/internal/orama-search-results.stories.tsx +++ b/apps/storybook/stories/internal/orama-search-results.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/SearchResults', component: 'orama-search-results', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-search.stories.tsx b/apps/storybook/stories/internal/orama-search.stories.tsx index 1b770b6f..5e8c59ec 100644 --- a/apps/storybook/stories/internal/orama-search.stories.tsx +++ b/apps/storybook/stories/internal/orama-search.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/Search', component: 'orama-search', + tags: ['autodocs'], } export default meta diff --git a/apps/storybook/stories/internal/orama-toggler.stories.tsx b/apps/storybook/stories/internal/orama-toggler.stories.tsx index 622a28e5..987df866 100644 --- a/apps/storybook/stories/internal/orama-toggler.stories.tsx +++ b/apps/storybook/stories/internal/orama-toggler.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Internal/Toggle', component: 'orama-toggler', + tags: ['autodocs'], } satisfies Meta export default meta diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx index 16061b86..f5ccea87 100644 --- a/apps/storybook/stories/public/orama-chat-box.stories.tsx +++ b/apps/storybook/stories/public/orama-chat-box.stories.tsx @@ -18,6 +18,7 @@ const demoIndexes = { const meta: Meta = { title: 'Components/Public/ChatBox', component: 'orama-chat-box', + tags: ['autodocs'], argTypes: { index: { options: Object.keys(demoIndexes), diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx index e30e254a..12a5b4fd 100644 --- a/apps/storybook/stories/public/orama-search-box.stories.tsx +++ b/apps/storybook/stories/public/orama-search-box.stories.tsx @@ -5,6 +5,7 @@ type Story = StoryObj const meta: Meta = { title: 'Components/Public/SearchBox', component: 'orama-search-box', + tags: ['autodocs'], argTypes: { colorScheme: { options: ['light', 'dark', 'system'], diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx index a0b7ae9f..1ed7ed09 100644 --- a/apps/storybook/stories/public/orama-search-button.stories.tsx +++ b/apps/storybook/stories/public/orama-search-button.stories.tsx @@ -4,6 +4,7 @@ import type { Components } from '@orama/wc-components' const meta: Meta = { title: 'Components/Public/SearchButton', component: 'orama-search-button', + tags: ['autodocs'], } satisfies Meta export default meta 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 37d2ad3f..f8f1348e 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -11,7 +11,7 @@ | `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | | `facetProperty` | `facet-property` | | `string` | `undefined` | | `open` | `open` | | `boolean` | `false` | -| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` | +| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | | `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ 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` | diff --git a/packages/ui-stencil/src/styles/_themes.scss b/packages/ui-stencil/src/styles/_themes.scss index fb00f412..77fe37a2 100644 --- a/packages/ui-stencil/src/styles/_themes.scss +++ b/packages/ui-stencil/src/styles/_themes.scss @@ -1,6 +1,5 @@ @import 'colors'; -// TODO: should be imported by the config/colors.ts file // TODO: review --background-ai-gradient-one and --background-ai-gradient-two with Angela $theme-colors-light: ( '--text-color-primary': text-color('primary'), diff --git a/packages/ui-stencil/src/types/index.ts b/packages/ui-stencil/src/types/index.ts index 37562c1c..6577f496 100644 --- a/packages/ui-stencil/src/types/index.ts +++ b/packages/ui-stencil/src/types/index.ts @@ -14,6 +14,8 @@ export type SearchResultBySection = { export type ResultMap = { [K in keyof Omit | 'section']?: string } +export type SourcesMap = { [K in keyof Omit]?: string } + export type CloudIndexConfig = { api_key: string endpoint: string From c60a8a392e58de5b61038c81721b4955813122e7 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Mon, 29 Jul 2024 19:49:45 +0200 Subject: [PATCH 04/11] feat: add sourcesMap to choose fields to use for sources --- .../stories/public/orama-chat-box.stories.tsx | 8 +++++++- packages/ui-stencil-vue/lib/components.ts | 6 ++++-- packages/ui-stencil/src/components.d.ts | 8 ++++++-- .../orama-chat-assistent-message.tsx | 6 +++--- .../orama-chat-assistent-message/readme.md | 6 +++--- .../orama-chat-user-message/readme.md | 6 +++--- .../components/internal/orama-chat/orama-chat.tsx | 6 ++++++ .../src/components/internal/orama-chat/readme.md | 9 +++++---- .../src/components/orama-chat-box/orama-chat-box.tsx | 5 +++-- .../src/components/orama-chat-box/readme.md | 11 ++++++----- packages/ui-stencil/src/context/chatContext.ts | 8 +++++++- packages/ui-stencil/src/services/ChatService.ts | 12 +----------- 12 files changed, 54 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 f5ccea87..6f458646 100644 --- a/apps/storybook/stories/public/orama-chat-box.stories.tsx +++ b/apps/storybook/stories/public/orama-chat-box.stories.tsx @@ -15,7 +15,8 @@ const demoIndexes = { endpoint: 'https://cloud.orama.foo/v1/indexes/videogames-rk139h', }, } -const meta: Meta = { + +const meta: Meta = { title: 'Components/Public/ChatBox', component: 'orama-chat-box', tags: ['autodocs'], @@ -39,5 +40,10 @@ export const ChatBox: Story = { api_key: demoIndexes.orama.api_key, endpoint: demoIndexes.orama.endpoint, }, + sourcesMap: { + title: 'title', + description: 'description', + path: 'path', + }, }, } diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index f13483ce..cef239e9 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -20,7 +20,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer('orama export const OramaChat = /*@__PURE__*/ defineContainer('orama-chat', undefined, [ 'placeholder', - 'sourceBaseUrl' + 'sourceBaseUrl', + 'sourcesMap' ]); @@ -32,7 +33,8 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer('orama-chat-box', undefined, [ 'index', 'sourceBaseUrl', - 'placeholder' + 'placeholder', + 'sourcesMap' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index f883c226..b84b0e0c 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -6,16 +6,16 @@ */ 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 { TChatInteraction } from "./context/chatContext"; -import { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection } from "./types/index"; import { Facet } from "./components/internal/orama-facets/orama-facets"; import { InputProps } from "./components/internal/orama-input/orama-input"; 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 { TChatInteraction } from "./context/chatContext"; -export { CloudIndexConfig, ResultMap, SearchResult, SearchResultBySection } from "./types/index"; export { Facet } from "./components/internal/orama-facets/orama-facets"; export { InputProps } from "./components/internal/orama-input/orama-input"; export { TThemeOverrides } from "./config/theme"; @@ -33,6 +33,7 @@ export namespace Components { interface OramaChat { "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatAssistentMessage { "interaction": TChatInteraction; @@ -41,6 +42,7 @@ export namespace Components { "index": CloudIndexConfig; "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatMessagesContainer { "interactions": TChatInteraction[]; @@ -313,6 +315,7 @@ declare namespace LocalJSX { interface OramaChat { "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatAssistentMessage { "interaction"?: TChatInteraction; @@ -321,6 +324,7 @@ declare namespace LocalJSX { "index"?: CloudIndexConfig; "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatMessagesContainer { "interactions"?: TChatInteraction[]; diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx index 54730255..894f0860 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx @@ -62,7 +62,7 @@ export class OramaChatAssistentMessage {

Sources

{this.interaction.sources.map((source, index) => ( key={`source-${index}`} @@ -70,10 +70,10 @@ export class OramaChatAssistentMessage { rel="noopener noreferrer" > - {source.title} + {source[chatContext.sourcesMap.title]} - {source.description} + {source[chatContext.sourcesMap.description]} ))} diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md index c05e3b0a..c0f5b97c 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md @@ -7,9 +7,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `interaction` | -- | | `{ query: string; response?: string; sources?: TSource[]; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md index 55e36d20..70b05dc3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md @@ -7,9 +7,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `interaction` | -- | | `{ query: string; response?: string; sources?: TSource[]; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | ## Dependencies 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 93514631..53243716 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 @@ -3,6 +3,7 @@ import { chatContext, TAnswerStatus } from '@/context/chatContext' import '@phosphor-icons/webcomponents/dist/icons/PhPaperPlaneTilt.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhStop.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhArrowCircleDown.mjs' +import { SourcesMap } from '@/types' // TODO: Hardcoding suggestions for now const SUGGESTIONS = [ @@ -20,6 +21,7 @@ const BOTTOM_THRESHOLD = 1 export class OramaChat { @Prop() placeholder?: string = 'Ask me anything' @Prop() sourceBaseUrl?: string = '' + @Prop() sourcesMap?: SourcesMap @State() inputValue = '' messagesContainerRef!: HTMLElement isScrolling = false @@ -98,6 +100,10 @@ export class OramaChat { this.messagesContainerRef.addEventListener('wheel', this.handleWheel) this.recalculateLockOnBottom() chatContext.sourceBaseURL = this.sourceBaseUrl + chatContext.sourcesMap = { + ...chatContext.sourcesMap, + ...this.sourcesMap, + } } handleSubmit = (e: Event) => { 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 d986b43b..b239dfb6 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -7,10 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ----------------- | ----------- | -------- | ------------------- | -| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | +| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx index 12ba1f14..aa9bd20f 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx +++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx @@ -2,7 +2,7 @@ import { Component, Host, h, Prop, Watch } from '@stencil/core' import { chatContext } from '@/context/chatContext' import { ChatService } from '@/services/ChatService' import { initOramaClient } from '@/utils/utils' -import type { CloudIndexConfig } from '@/types' +import type { CloudIndexConfig, SourcesMap } from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs' @Component({ @@ -14,6 +14,7 @@ export class ChatBox { @Prop() index: CloudIndexConfig @Prop() sourceBaseUrl?: string @Prop() placeholder?: string + @Prop() sourcesMap?: SourcesMap @Watch('cloudIndex') indexChanged() { @@ -37,7 +38,7 @@ export class ChatBox { return ( // * Note: only dark theme supported at the moment - + ) } 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 92b4ad18..21dfcac5 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ----------------- | ----------- | ---------------------------------------- | ----------- | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ----------- | +| `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` | ## Dependencies diff --git a/packages/ui-stencil/src/context/chatContext.ts b/packages/ui-stencil/src/context/chatContext.ts index 885e51be..1684f469 100644 --- a/packages/ui-stencil/src/context/chatContext.ts +++ b/packages/ui-stencil/src/context/chatContext.ts @@ -1,5 +1,6 @@ import type { ChatService } from '@/services/ChatService' import { createStore } from '@stencil/store' +import type { SourcesMap } from '@/types' // TODO: Seems like there is no message type being exported from orama-client rn // export type TChatMessageBlock = { @@ -26,7 +27,7 @@ export type TSource = { export type TChatInteraction = { query: string response?: string - sources?: TSource[] + sources?: any // should be Results from orama-client latest?: boolean status: TAnswerStatus interactionId?: string @@ -37,6 +38,11 @@ const { state: chatContext, ...chatStore } = createStore({ chatService: null as ChatService | null, interactions: [] as TChatInteraction[], sourceBaseURL: '' as string, + sourcesMap: { + title: 'title', + description: 'description', + path: 'path', + } as SourcesMap, lockScrollOnBottom: true as boolean, }) diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index 03337963..dcc2a76d 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -29,16 +29,6 @@ export class ChatService { const loading = latestState.loading const response = latestState.response - // biome-ignore lint/suspicious/noExplicitAny: Client should expose this type - const sources = (latestState.sources as any)?.map((source) => { - // TODO: this should depend on the source type - return { - title: source.document?.title, - description: source.document?.content, - path: source.document?.path, - } - }) - let answerStatus = TAnswerStatus.loading if (loading && response) { @@ -52,7 +42,7 @@ export class ChatService { return { ...interaction, response, - sources, + sources: (latestState.sources as any)?.map((source) => source.document), interactionId: latestState.interactionId, relatedQueries: latestState.relatedQueries, status: answerStatus, From c70202669c415d72516fbef563802ee234c2860c Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 12:05:11 +0200 Subject: [PATCH 05/11] docs: update design tokens doc --- apps/storybook/stories/DesignTokens.mdx | 77 +++++++++++++++++++ .../components/internal/orama-chat/readme.md | 2 +- .../src/components/orama-chat-box/readme.md | 2 +- .../src/components/orama-search-box/readme.md | 2 +- 4 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 apps/storybook/stories/DesignTokens.mdx diff --git a/apps/storybook/stories/DesignTokens.mdx b/apps/storybook/stories/DesignTokens.mdx new file mode 100644 index 00000000..1aae7b5d --- /dev/null +++ b/apps/storybook/stories/DesignTokens.mdx @@ -0,0 +1,77 @@ +import { Meta } from '@storybook/blocks'; + + + +# Theming with Design Tokens + +Design tokens are a critical part of ensuring consistency and scalability in your design system. This guide shows how to avoid hardcoding values for colors, spacings, and typography by using tokens, while also supporting theme-specific styles using CSS custom properties. + +## Global styles + +We're using global styles that are available to all components and allow theme customization by exposing CSS custom properties. + +We use the `mapToCustomProperties(map)` mixin to apply custom properties from a map of key-value pairs. This mixin generates CSS custom properties for each key-value pair in the map, using the key as the property name and the value as the property value. +Theme switcher classes `.theme-light` and `.theme-dark` are used to apply the color tokens and they must be applied to the host element. +As an extra layer of safety, to avoid any possible collisions with same named custom properties defined in the hosting application under the same class name, we use the `id^='orama-ui'` selector to scope the custom properties, therefore all shadow hosts must have an id starting with `orama-ui`. + + +```css +[id^='orama-ui'] { + @include mapToCustomProperties($theme-light); // light theme is the default + @include mapToCustomProperties($theme-typography); + // other global styles... + + &.theme-dark { + @include mapToCustomProperties($theme-dark); + } +} +``` + +## Colors +Instead of hardcoding color values, we use tokens defined in the global styles with support for themes. This approach allows you to easily switch between themes and maintain consistency across your application. + +When applying styles in your components, use the CSS custom properties with a fallback to the Sass function, that provide a fallback value from a predefined palette: + +```css +.my-component { + color: var(--text-color-primary, text-color(primary)); + border: 1px solid var(--border-color-secondary, border-color(secondary)); + background-color: var(--background-color-primary, background-color(primary)); + +} +``` + +## Spacings + +Similar to colors, we define spacings using tokens: + +```css +.my-component { + margin: var(--spacing-s, $spacing-s); +} +``` + +We don't use the Sass function to fallback for spacings, as we don't expect to change them based on color scheme. We use plain sass variables for spacings. + +## Typography + +Typography values should also use tokens for consistency across themes: + +```css +.my-component { + font-size: var(--font-size-xs, $font-size-xs); + line-height: var(--font-line-height-s, $font-line-height-s); +} +``` + +## Radius + +Border radius values should also use tokens for consistency across themes: + +```css +.my-component { + border-radius: var(--radius-s, $radius-s); +} +``` + +By following these practices, you ensure that your styles are consistent, maintainable, and easy to update across your entire application while supporting theme-specific custom properties. 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 b239dfb6..d906c54a 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -11,7 +11,7 @@ | --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `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/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index f8f1348e..37d2ad3f 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -11,7 +11,7 @@ | `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | | `facetProperty` | `facet-property` | | `string` | `undefined` | | `open` | `open` | | `boolean` | `false` | -| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | +| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` | | `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ 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 718d2a4a0b810e269f06b797d765c28feee03b82 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 12:07:27 +0200 Subject: [PATCH 06/11] docs: update link to tokens --- apps/storybook/components/basics/basics.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/storybook/components/basics/basics.jsx b/apps/storybook/components/basics/basics.jsx index eab2430e..df2f4fbe 100644 --- a/apps/storybook/components/basics/basics.jsx +++ b/apps/storybook/components/basics/basics.jsx @@ -9,7 +9,8 @@ export const Basics = () => ( Named entities that store visual design properties. Used to ensure a scalable and consistent visual system for UI development.

- Design tokens + // Link to the design tokens mdx page + Design tokens

Components

From c83f2410412c76687452708180ece3253dd86c0a Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 13:04:31 +0200 Subject: [PATCH 07/11] fix: fix link url --- apps/storybook/components/basics/basics.jsx | 3 +-- apps/storybook/stories/DesignTokens.mdx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/storybook/components/basics/basics.jsx b/apps/storybook/components/basics/basics.jsx index df2f4fbe..5cd06dfc 100644 --- a/apps/storybook/components/basics/basics.jsx +++ b/apps/storybook/components/basics/basics.jsx @@ -9,8 +9,7 @@ export const Basics = () => ( Named entities that store visual design properties. Used to ensure a scalable and consistent visual system for UI development.

- // Link to the design tokens mdx page - Design tokens + Design tokens

Components

diff --git a/apps/storybook/stories/DesignTokens.mdx b/apps/storybook/stories/DesignTokens.mdx index 1aae7b5d..90b1ec64 100644 --- a/apps/storybook/stories/DesignTokens.mdx +++ b/apps/storybook/stories/DesignTokens.mdx @@ -10,7 +10,7 @@ Design tokens are a critical part of ensuring consistency and scalability in you We're using global styles that are available to all components and allow theme customization by exposing CSS custom properties. -We use the `mapToCustomProperties(map)` mixin to apply custom properties from a map of key-value pairs. This mixin generates CSS custom properties for each key-value pair in the map, using the key as the property name and the value as the property value. +We use the `mapToCustomProperties(map)` mixin to apply custom properties from a map of key-value pairs. Theme switcher classes `.theme-light` and `.theme-dark` are used to apply the color tokens and they must be applied to the host element. As an extra layer of safety, to avoid any possible collisions with same named custom properties defined in the hosting application under the same class name, we use the `id^='orama-ui'` selector to scope the custom properties, therefore all shadow hosts must have an id starting with `orama-ui`. From dbd931304b03038902a1cfe522543412eaaeb9ae Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 13:36:10 +0200 Subject: [PATCH 08/11] refactor: rename cloudIndex as index and make clear chat hideable --- apps/storybook/stories/Welcome.mdx | 2 +- .../public/orama-search-box.stories.tsx | 2 +- packages/ui-stencil-vue/lib/components.ts | 5 +++-- packages/ui-stencil/src/components.d.ts | 6 ++++-- .../internal/orama-chat/orama-chat.tsx | 21 +++++++++++-------- .../components/internal/orama-chat/readme.md | 3 ++- .../src/components/orama-chat-box/readme.md | 2 +- .../orama-search-box/orama-search-box.tsx | 13 +++++++----- .../src/components/orama-search-box/readme.md | 4 ++-- .../ui-stencil/src/services/ChatService.ts | 4 ++++ packages/ui-stencil/src/utils/utils.ts | 12 +++++------ 11 files changed, 44 insertions(+), 30 deletions(-) diff --git a/apps/storybook/stories/Welcome.mdx b/apps/storybook/stories/Welcome.mdx index 3f4e1d9f..8548c9ef 100644 --- a/apps/storybook/stories/Welcome.mdx +++ b/apps/storybook/stories/Welcome.mdx @@ -11,6 +11,6 @@ Here you can find a collection of stories that showcase the Orama UI Kit compone The Orama UI Kit is a collection of components and patterns that make up the design system. The components are designed to easily integrate search and chat functionality in your project. They are available as web components, React components, Vue components, and Angular components. {/* create 3 boxes, one for Foundations, another for Components, and another for Contributing */} -
+
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx index 12a5b4fd..eb3c4e0e 100644 --- a/apps/storybook/stories/public/orama-search-box.stories.tsx +++ b/apps/storybook/stories/public/orama-search-box.stories.tsx @@ -46,7 +46,7 @@ export const SearchBox: Story = { }, }, }, - cloudIndex: { + index: { api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR', endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm', }, diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index cef239e9..c0f5d9f7 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -21,7 +21,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer('orama export const OramaChat = /*@__PURE__*/ defineContainer('orama-chat', undefined, [ 'placeholder', 'sourceBaseUrl', - 'sourcesMap' + 'sourcesMap', + 'showClearChat' ]); @@ -98,7 +99,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( 'facetProperty', 'open', 'resultMap', - 'cloudIndex' + 'index' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index b84b0e0c..d780e9f8 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 { "placeholder"?: string; + "showClearChat"?: boolean; "sourceBaseUrl"?: string; "sourcesMap"?: SourcesMap; } @@ -81,9 +82,9 @@ export namespace Components { interface OramaSearch { } interface OramaSearchBox { - "cloudIndex": CloudIndexConfig; "colorScheme"?: 'dark' | 'light' | 'system'; "facetProperty"?: string; + "index": CloudIndexConfig; "open"?: boolean; "resultMap"?: Partial; "themeConfig"?: Partial; @@ -314,6 +315,7 @@ declare namespace LocalJSX { } interface OramaChat { "placeholder"?: string; + "showClearChat"?: boolean; "sourceBaseUrl"?: string; "sourcesMap"?: SourcesMap; } @@ -364,9 +366,9 @@ declare namespace LocalJSX { interface OramaSearch { } interface OramaSearchBox { - "cloudIndex"?: CloudIndexConfig; "colorScheme"?: 'dark' | 'light' | 'system'; "facetProperty"?: string; + "index"?: CloudIndexConfig; "open"?: boolean; "resultMap"?: Partial; "themeConfig"?: Partial; 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 511801d0..445804a4 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 @@ -22,6 +22,7 @@ export class OramaChat { @Prop() placeholder?: string = 'Ask me anything' @Prop() sourceBaseUrl?: string = '' @Prop() sourcesMap?: SourcesMap + @Prop() showClearChat?: boolean = true @State() inputValue = '' messagesContainerRef!: HTMLElement isScrolling = false @@ -140,15 +141,17 @@ export class OramaChat { // ? Question: Maybe should be a orama-button variant? return ( -
- -
+ {this.showClearChat && ( +
+ +
+ )} {/* CHAT MESSAGES */}
(this.messagesContainerRef = ref)}> 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 d906c54a..df6495b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -10,8 +10,9 @@ | Property | Attribute | Description | Type | Default | | --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | | `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/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 d19c00a5..02efa64e 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 @@ -22,12 +22,12 @@ export class SearchBox { @Prop() facetProperty?: string @Prop() open? = false @Prop() resultMap?: Partial = {} - @Prop() cloudIndex: CloudIndexConfig + @Prop() index: CloudIndexConfig @State() systemScheme: 'light' | 'dark' = 'light' - @Watch('cloudIndex') - cloudIndexChanged() { + @Watch('index') + indexChanged() { this.startServices() } @@ -97,7 +97,7 @@ export class SearchBox { } startServices() { - const oramaClient = initOramaClient(this.cloudIndex) + const oramaClient = initOramaClient(this.index) searchState.searchService = new SearchService(oramaClient) chatContext.chatService = new ChatService(oramaClient) } @@ -132,7 +132,10 @@ export class SearchBox {
- +
{/* FOOTER - to replace with component */} {/* TODO: Hidden footer for now */} 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 37d2ad3f..e16f77f7 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -7,11 +7,11 @@ | Property | Attribute | Description | Type | Default | | --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `cloudIndex` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `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; }` | `{}` | +| `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` | diff --git a/packages/ui-stencil/src/services/ChatService.ts b/packages/ui-stencil/src/services/ChatService.ts index 82bc4978..edbeabfd 100644 --- a/packages/ui-stencil/src/services/ChatService.ts +++ b/packages/ui-stencil/src/services/ChatService.ts @@ -21,6 +21,7 @@ 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 @@ -80,10 +81,13 @@ 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/utils/utils.ts b/packages/ui-stencil/src/utils/utils.ts index f0d7541c..608eb9f3 100644 --- a/packages/ui-stencil/src/utils/utils.ts +++ b/packages/ui-stencil/src/utils/utils.ts @@ -35,16 +35,16 @@ export function getNonExplicitAttributes(element: HTMLElement, explicitProps: st }, {}) } -export function validateCloudIndexConfig(config: CloudIndexConfig): void { - if (!config || !config.api_key || !config.endpoint) { +export function validateCloudIndexConfig(index: CloudIndexConfig): void { + if (!index || !index.api_key || !index.endpoint) { throw new Error('Invalid cloud index configuration. Please provide a valid api_key and endpoint') } } -export function initOramaClient(config: CloudIndexConfig): OramaClient | null { - validateCloudIndexConfig(config) +export function initOramaClient(index: CloudIndexConfig): OramaClient | null { + validateCloudIndexConfig(index) return new OramaClient({ - api_key: config.api_key, - endpoint: config.endpoint, + api_key: index.api_key, + endpoint: index.endpoint, }) } From 9abcf5f0a534cf5538afa32408a172e1ae5decab Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 13:59:02 +0200 Subject: [PATCH 09/11] fix: doc entry point --- apps/storybook/stories/DesignTokens.mdx | 2 +- .../ui-stencil/src/components/internal/orama-chat/readme.md | 2 +- packages/ui-stencil/src/components/orama-chat-box/readme.md | 2 +- packages/ui-stencil/src/components/orama-search-box/readme.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/storybook/stories/DesignTokens.mdx b/apps/storybook/stories/DesignTokens.mdx index 90b1ec64..3459901d 100644 --- a/apps/storybook/stories/DesignTokens.mdx +++ b/apps/storybook/stories/DesignTokens.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Theming with Design Tokens 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/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 0f4d778229eb8a0e5d6b6b6552fe5c85ee87a8b3 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 16:14:39 +0200 Subject: [PATCH 10/11] fix: bundle global style in angular wrapper --- apps/demo-angular/src/styles.css | 2 +- .../projects/component-library/ng-package.json | 5 ++++- .../projects/component-library/src/styles.css | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 packages/ui-stencil-angular/projects/component-library/src/styles.css diff --git a/apps/demo-angular/src/styles.css b/apps/demo-angular/src/styles.css index bb025f18..40113cfe 100644 --- a/apps/demo-angular/src/styles.css +++ b/apps/demo-angular/src/styles.css @@ -1,4 +1,4 @@ -@import '@orama/wc-components/dist/orama-ui/orama-ui.css'; + @import '~@orama/angular-components/dist/component-library/styles.css'; /* You can add global styles to this file, and also import other style files */ #root { diff --git a/packages/ui-stencil-angular/projects/component-library/ng-package.json b/packages/ui-stencil-angular/projects/component-library/ng-package.json index b86bdca5..27ab1f4a 100644 --- a/packages/ui-stencil-angular/projects/component-library/ng-package.json +++ b/packages/ui-stencil-angular/projects/component-library/ng-package.json @@ -1,7 +1,10 @@ { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/component-library", + "assets": [ + { "input": "./src", "output": "./", "glob": "*.css" } + ], "lib": { "entryFile": "src/public-api.ts" } -} \ No newline at end of file +} diff --git a/packages/ui-stencil-angular/projects/component-library/src/styles.css b/packages/ui-stencil-angular/projects/component-library/src/styles.css new file mode 100644 index 00000000..9ef3701c --- /dev/null +++ b/packages/ui-stencil-angular/projects/component-library/src/styles.css @@ -0,0 +1 @@ +@import '~@orama/wc-components/dist/orama-ui/orama-ui.css'; From e044cd39f91a438cddd0355a41049592391bc7dc Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Tue, 30 Jul 2024 16:14:52 +0200 Subject: [PATCH 11/11] docs: update wrapper docs --- .../stories/{ => docs}/DesignTokens.mdx | 0 apps/storybook/stories/{ => docs}/Welcome.mdx | 0 .../stories/docs/frameworks/Angular.mdx | 49 ++++++++++++++++++ .../stories/docs/frameworks/React.mdx | 41 +++++++++++++++ .../storybook/stories/docs/frameworks/Vue.mdx | 50 +++++++++++++++++++ 5 files changed, 140 insertions(+) rename apps/storybook/stories/{ => docs}/DesignTokens.mdx (100%) rename apps/storybook/stories/{ => docs}/Welcome.mdx (100%) create mode 100644 apps/storybook/stories/docs/frameworks/Angular.mdx create mode 100644 apps/storybook/stories/docs/frameworks/React.mdx create mode 100644 apps/storybook/stories/docs/frameworks/Vue.mdx diff --git a/apps/storybook/stories/DesignTokens.mdx b/apps/storybook/stories/docs/DesignTokens.mdx similarity index 100% rename from apps/storybook/stories/DesignTokens.mdx rename to apps/storybook/stories/docs/DesignTokens.mdx diff --git a/apps/storybook/stories/Welcome.mdx b/apps/storybook/stories/docs/Welcome.mdx similarity index 100% rename from apps/storybook/stories/Welcome.mdx rename to apps/storybook/stories/docs/Welcome.mdx diff --git a/apps/storybook/stories/docs/frameworks/Angular.mdx b/apps/storybook/stories/docs/frameworks/Angular.mdx new file mode 100644 index 00000000..ccb3f836 --- /dev/null +++ b/apps/storybook/stories/docs/frameworks/Angular.mdx @@ -0,0 +1,49 @@ +import { Meta } from '@storybook/blocks'; + + + +# Angular + +We offer an Angular 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: + +```bash +npm install @orama/angular-components +``` +You can use pnpm or yarn if you prefer. + +## Usage + +In your `app.module.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: [] +}) +``` + +In order to apply the global styles to your Angular project, you need to import the styles in your Angular project's styles.css or styles.scss + +```css +@import '~@orama/angular-components/dist/component-library/styles.css'; +``` + +You can then use the components you need in your project: + +```html + +``` diff --git a/apps/storybook/stories/docs/frameworks/React.mdx b/apps/storybook/stories/docs/frameworks/React.mdx new file mode 100644 index 00000000..abaedd35 --- /dev/null +++ b/apps/storybook/stories/docs/frameworks/React.mdx @@ -0,0 +1,41 @@ +import { Meta } from '@storybook/blocks'; + + + +# React + +We offer a React version of every public component so you can use them in your React projects. + +## Installation + +To add the Orama UI Kit to your React project, run: + +```bash +npm install @orama/react-components +``` +You can use pnpm or yarn if you prefer. + +## Usage + +In your `App.tsx` file, import the component definition and use it in your JSX: + +```tsx +import { defineCustomElements } from '@orama/react-components' + +void defineCustomElements() +``` + +You can then import and use the components you need in your project: + +```tsx +import { OramaChatBox } from '@orama/react-components' + +export const App = () => ( + +) +``` diff --git a/apps/storybook/stories/docs/frameworks/Vue.mdx b/apps/storybook/stories/docs/frameworks/Vue.mdx new file mode 100644 index 00000000..63b077a2 --- /dev/null +++ b/apps/storybook/stories/docs/frameworks/Vue.mdx @@ -0,0 +1,50 @@ +import { Meta } from '@storybook/blocks'; + + + +# Vue + +We offer an Angular 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: + +```bash +npm install @orama/vue-components +``` +You can use pnpm or yarn if you prefer. + +## Usage + +In your `app.module.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 + +```css +@import '@orama/wc-components/dist/orama-ui/orama-ui.css'; +``` + +You can then use the components you need in your project: + +```html + +```