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..40113cfe 100644 --- a/apps/demo-angular/src/styles.css +++ b/apps/demo-angular/src/styles.css @@ -1,3 +1,5 @@ + @import '~@orama/angular-components/dist/component-library/styles.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/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/apps/storybook/components/basics/basics.jsx b/apps/storybook/components/basics/basics.jsx index eab2430e..5cd06dfc 100644 --- a/apps/storybook/components/basics/basics.jsx +++ b/apps/storybook/components/basics/basics.jsx @@ -9,7 +9,7 @@ export const Basics = () => ( Named entities that store visual design properties. Used to ensure a scalable and consistent visual system for UI development.

- Design tokens + Design tokens

Components

diff --git a/apps/storybook/stories/docs/DesignTokens.mdx b/apps/storybook/stories/docs/DesignTokens.mdx new file mode 100644 index 00000000..3459901d --- /dev/null +++ b/apps/storybook/stories/docs/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. +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/apps/storybook/stories/Welcome.mdx b/apps/storybook/stories/docs/Welcome.mdx similarity index 97% rename from apps/storybook/stories/Welcome.mdx rename to apps/storybook/stories/docs/Welcome.mdx index 3f4e1d9f..8548c9ef 100644 --- a/apps/storybook/stories/Welcome.mdx +++ b/apps/storybook/stories/docs/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/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 + +``` 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..6f458646 100644 --- a/apps/storybook/stories/public/orama-chat-box.stories.tsx +++ b/apps/storybook/stories/public/orama-chat-box.stories.tsx @@ -15,9 +15,11 @@ 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'], argTypes: { index: { options: Object.keys(demoIndexes), @@ -38,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/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx index e30e254a..eb3c4e0e 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'], @@ -45,7 +46,7 @@ export const SearchBox: Story = { }, }, }, - cloudIndex: { + index: { api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR', endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm', }, 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-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/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' 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'; diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index f13483ce..c0f5d9f7 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -20,7 +20,9 @@ export const OramaButton = /*@__PURE__*/ defineContainer('orama export const OramaChat = /*@__PURE__*/ defineContainer('orama-chat', undefined, [ 'placeholder', - 'sourceBaseUrl' + 'sourceBaseUrl', + 'sourcesMap', + 'showClearChat' ]); @@ -32,7 +34,8 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer('orama-chat-box', undefined, [ 'index', 'sourceBaseUrl', - 'placeholder' + 'placeholder', + 'sourcesMap' ]); @@ -96,7 +99,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( 'facetProperty', 'open', 'resultMap', - 'cloudIndex' + 'index' ]); 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:*" }, diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index f883c226..d780e9f8 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"; @@ -32,7 +32,9 @@ export namespace Components { } interface OramaChat { "placeholder"?: string; + "showClearChat"?: boolean; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatAssistentMessage { "interaction": TChatInteraction; @@ -41,6 +43,7 @@ export namespace Components { "index": CloudIndexConfig; "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatMessagesContainer { "interactions": TChatInteraction[]; @@ -79,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; @@ -312,7 +315,9 @@ declare namespace LocalJSX { } interface OramaChat { "placeholder"?: string; + "showClearChat"?: boolean; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatAssistentMessage { "interaction"?: TChatInteraction; @@ -321,6 +326,7 @@ declare namespace LocalJSX { "index"?: CloudIndexConfig; "placeholder"?: string; "sourceBaseUrl"?: string; + "sourcesMap"?: SourcesMap; } interface OramaChatMessagesContainer { "interactions"?: TChatInteraction[]; @@ -360,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-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.scss b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss index e074ca63..5614fcb6 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss @@ -4,6 +4,7 @@ orama-chat { flex-direction: column; flex-grow: 1; overflow: hidden; + // todo: this is probabily to fix, since now it's not meant for generic purpose, but to be used in orama website max-height: pxToRem(613); // background: linear-gradient(180deg, var(--background-ai-gradient-one) 0%, var(--background-ai-gradient-two) 50%); background: var(--background-color-primary, background-color('primary')); 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 ed8f34c1..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 @@ -1,5 +1,6 @@ import { Component, Host, Prop, State, Watch, h } from '@stencil/core' import { chatContext, TAnswerStatus } from '@/context/chatContext' +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' @@ -20,6 +21,8 @@ const BOTTOM_THRESHOLD = 1 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 @@ -98,6 +101,10 @@ export class OramaChat { this.messagesContainerRef.addEventListener('wheel', this.handleWheel) this.recalculateLockOnBottom() chatContext.sourceBaseURL = this.sourceBaseUrl + chatContext.sourcesMap = { + ...chatContext.sourcesMap, + ...this.sourcesMap, + } } componentDidUpdate() { @@ -134,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 d986b43b..5cb696c5 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,12 @@ ## 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'` | +| `showClearChat` | `show-clear-chat` | | `boolean` | `true` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | +| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: 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..eaafcc60 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; path?: string; description?: 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..7fe8637c 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -7,9 +7,9 @@ | 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; }` | `{}` | | `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/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 4c8e3748..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 @@ -31,14 +32,7 @@ export class ChatService { } // biome-ignore lint/suspicious/noExplicitAny: Client should expose this type - const sources = (interaction.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, - } - }) + const sources = (interaction.sources as any)?.map((source) => source.document) return { query: interaction.query, @@ -87,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/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 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, }) }