diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
index 7c489bd2..9d17ac03 100644
--- a/apps/storybook/.storybook/main.js
+++ b/apps/storybook/.storybook/main.js
@@ -1,33 +1,30 @@
-import { join, dirname } from "path";
+import { join, dirname } from 'path'
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
- return dirname(require.resolve(join(value, "package.json")));
+ return dirname(require.resolve(join(value, 'package.json')))
}
/** @type { import('@storybook/html-vite').StorybookConfig } */
const config = {
- stories: [
- "../stories/**/*.mdx",
- "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
- ],
+ stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
- getAbsolutePath("@storybook/addon-links"),
- getAbsolutePath("@storybook/addon-essentials"),
- getAbsolutePath("@storybook/addon-interactions"),
- getAbsolutePath("@storybook/addon-styling-webpack"),
- getAbsolutePath("@storybook/addon-designs"),
- getAbsolutePath("@storybook/addon-themes"),
- getAbsolutePath("@storybook/addon-a11y"),
- "@chromatic-com/storybook"
+ getAbsolutePath('@storybook/addon-links'),
+ getAbsolutePath('@storybook/addon-essentials'),
+ getAbsolutePath('@storybook/addon-interactions'),
+ getAbsolutePath('@storybook/addon-styling-webpack'),
+ getAbsolutePath('@storybook/addon-designs'),
+ getAbsolutePath('@storybook/addon-themes'),
+ getAbsolutePath('@storybook/addon-a11y'),
+ '@chromatic-com/storybook',
],
framework: {
- name: getAbsolutePath("@storybook/html-vite"),
+ name: getAbsolutePath('@storybook/html-vite'),
options: {},
},
docs: {},
-};
-export default config;
+}
+export default config
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 3787eb03..7f4e50a0 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -1,5 +1,6 @@
import { defineCustomElements } from './../../../packages/ui-stencil/loader'
import 'ui-stencil/dist/orama-ui/orama-ui.css'
+import './storybook.css'
defineCustomElements()
@@ -11,7 +12,7 @@ const preview = {
decorators: [
(story, context) => {
const classTheme = context.globals?.backgrounds?.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light'
- return `
${story()}
`
+ return `${story()}
`
},
],
parameters: {
@@ -22,7 +23,7 @@ const preview = {
},
},
backgrounds: {
- default: 'dark',
+ default: 'light',
values: [
{
name: 'dark',
diff --git a/apps/storybook/.storybook/storybook.css b/apps/storybook/.storybook/storybook.css
new file mode 100644
index 00000000..f40e2dbe
--- /dev/null
+++ b/apps/storybook/.storybook/storybook.css
@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+ /* padding: 0 !important; */
+}
\ No newline at end of file
diff --git a/apps/storybook/stories/orama-button.stories.tsx b/apps/storybook/stories/orama-button.stories.tsx
new file mode 100644
index 00000000..944551d0
--- /dev/null
+++ b/apps/storybook/stories/orama-button.stories.tsx
@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/html'
+
+const meta = {
+ title: 'Internal/Button',
+ component: 'orama-button',
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+const Template = (content: string) => (args) =>
+ `
+ ${content}
+`
+
+export const Primary: Story = {
+ render: Template('Primary button'),
+ args: {
+ variant: 'primary',
+ class: 'my-optional-class',
+ type: 'button',
+ },
+}
diff --git a/apps/storybook/stories/orama-chat.stories.tsx b/apps/storybook/stories/orama-chat.stories.tsx
index 567c8ccc..f68c426d 100644
--- a/apps/storybook/stories/orama-chat.stories.tsx
+++ b/apps/storybook/stories/orama-chat.stories.tsx
@@ -1,8 +1,8 @@
import type { StoryObj, Meta } from '@storybook/web-components'
const meta: Meta = {
- title: 'Demo Preview/OramaChat',
- component: 'orama-chat'
+ title: 'Internal/OramaChat',
+ component: 'orama-chat',
}
export default meta
@@ -13,12 +13,11 @@ const Template = (args) => {
-
`
}
// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
export const OramaChat: Story = {
render: Template,
- args: {}
+ args: {},
}
diff --git a/apps/storybook/stories/orama-facets.stories.tsx b/apps/storybook/stories/orama-facets.stories.tsx
new file mode 100644
index 00000000..7b526e6c
--- /dev/null
+++ b/apps/storybook/stories/orama-facets.stories.tsx
@@ -0,0 +1,30 @@
+// Create a story for the OramaFacets web component
+import { h } from '@stencil/core'
+import type { StoryObj, Meta } from '@storybook/web-components'
+
+const meta: Meta = {
+ title: 'Internal/Facets',
+ component: 'orama-facets',
+}
+
+export default meta
+
+type Story = StoryObj
+
+const Template = (args) => {
+ return `
+
+
Something that uses facets
+
+
+ `
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const Facets: Story = {
+ render: Template,
+ args: {
+ facets: ['FacetOne', 'FacetTwo', 'FacetThree'],
+ currentFacet: 'Facet 2',
+ },
+}
diff --git a/apps/storybook/stories/orama-search-results.stories.tsx b/apps/storybook/stories/orama-search-results.stories.tsx
index eb236ee7..f0d283e9 100644
--- a/apps/storybook/stories/orama-search-results.stories.tsx
+++ b/apps/storybook/stories/orama-search-results.stories.tsx
@@ -1,18 +1,36 @@
-import type { StoryObj, Meta } from "@storybook/html";
+import type { StoryObj, Meta } from '@storybook/html'
const meta = {
- title: "Internal/Search Results",
- component: "orama-search-results",
-} satisfies Meta;
+ title: 'Internal/Search Results',
+ component: 'orama-search-results',
+} satisfies Meta
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
const Template = (args) => `
-
-`;
+
+`
-export const Default: Story = {
+export const NoResults: Story = {
render: Template,
args: {},
-};
\ No newline at end of file
+}
+
+export const WithResults: Story = {
+ render: Template,
+ args: {
+ items: [
+ {
+ id: '1',
+ title: 'Title 1',
+ description: 'Description 1',
+ },
+ {
+ id: '2',
+ title: 'Title 2',
+ description: 'Description 2',
+ },
+ ],
+ },
+}
diff --git a/apps/storybook/stories/typography.stories.tsx b/apps/storybook/stories/orama-text.stories.tsx
similarity index 100%
rename from apps/storybook/stories/typography.stories.tsx
rename to apps/storybook/stories/orama-text.stories.tsx
diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
index 1718cc99..99e6efe1 100644
--- a/apps/storybook/stories/search-box.stories.tsx
+++ b/apps/storybook/stories/search-box.stories.tsx
@@ -2,18 +2,31 @@ import type { StoryObj, Meta } from '@storybook/html'
const meta: Meta = {
title: 'Public/SearchBox',
- component: 'search-box'
+ component: 'search-box',
+
+ argTypes: {
+ facetProperty: {
+ control: { type: 'text' },
+ },
+ },
} satisfies Meta
export default meta
type Story = StoryObj
// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+const Template = (args) => {
+ return `
+
+ `
+}
+
export const SearchBox: Story = {
- render: () => `
-
-
-
`
+ render: Template,
+ args: {
+ class: 'my-optional-class',
+ facetProperty: 'category',
+ },
}
export const SearchBoxWithToggler: Story = {
@@ -23,5 +36,5 @@ export const SearchBoxWithToggler: Story = {
- `
+ `,
}
diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
index f878b3e9..6620bfc0 100644
--- a/packages/ui-stencil-react/src/components/stencil-generated/index.ts
+++ b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -7,10 +7,12 @@ import type { JSX } from 'ui-stencil';
+export const OramaButton = /*@__PURE__*/createReactComponent('orama-button');
export const OramaChat = /*@__PURE__*/createReactComponent('orama-chat');
export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent('orama-chat-assistent-message');
export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent('orama-chat-messages-container');
export const OramaChatUserMessage = /*@__PURE__*/createReactComponent('orama-chat-user-message');
+export const OramaFacets = /*@__PURE__*/createReactComponent('orama-facets');
export const OramaInput = /*@__PURE__*/createReactComponent('orama-input');
export const OramaSearch = /*@__PURE__*/createReactComponent('orama-search');
export const OramaSearchResults = /*@__PURE__*/createReactComponent('orama-search-results');
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
index 24f15988..cf07f18a 100644
--- a/packages/ui-stencil-vue/lib/components.ts
+++ b/packages/ui-stencil-vue/lib/components.ts
@@ -8,6 +8,14 @@ import type { JSX } from 'ui-stencil';
+export const OramaButton = /*@__PURE__*/ defineContainer('orama-button', undefined, [
+ 'as',
+ 'class',
+ 'variant',
+ 'type'
+]);
+
+
export const OramaChat = /*@__PURE__*/ defineContainer('orama-chat', undefined);
@@ -24,6 +32,11 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer('orama-facets', undefined, [
+ 'facets'
+]);
+
+
export const OramaInput = /*@__PURE__*/ defineContainer('orama-input', undefined, [
'name',
'size',
@@ -41,14 +54,16 @@ export const OramaSearch = /*@__PURE__*/ defineContainer('orama
export const OramaSearchResults = /*@__PURE__*/ defineContainer('orama-search-results', undefined, [
'items',
- 'searchTerm'
+ 'searchTerm',
+ 'oramaItemClick'
]);
export const OramaText = /*@__PURE__*/ defineContainer('orama-text', undefined, [
'as',
'styledAs',
- 'class'
+ 'class',
+ 'align'
]);
@@ -69,6 +84,7 @@ export const OramaToggler = /*@__PURE__*/ defineContainer('ora
export const SearchBox = /*@__PURE__*/ defineContainer('search-box', undefined, [
'themeConfig',
'color',
+ 'facetProperty',
'open'
]);
diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
index d56e7b23..d0bb7245 100644
--- a/packages/ui-stencil/src/components.d.ts
+++ b/packages/ui-stencil/src/components.d.ts
@@ -5,15 +5,23 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { ButtonProps } from "./components/internal/orama-button/orama-button";
import { TChatMessage } from "./context/chatContext";
import { InputProps } from "./components/internal/orama-input/orama-input";
-import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+import { SearchItem, 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 { TChatMessage } from "./context/chatContext";
export { InputProps } from "./components/internal/orama-input/orama-input";
-export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+export { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
export { TextProps } from "./components/internal/orama-text/orama-text";
export namespace Components {
+ interface OramaButton {
+ "as"?: ButtonProps['as'];
+ "class"?: string;
+ "type"?: ButtonProps['type'];
+ "variant"?: ButtonProps['variant'];
+ }
interface OramaChat {
}
interface OramaChatAssistentMessage {
@@ -24,6 +32,9 @@ export namespace Components {
interface OramaChatUserMessage {
"message": TChatMessage;
}
+ interface OramaFacets {
+ "facets": any[];
+ }
interface OramaInput {
"defaultValue": InputProps['defaultValue'];
"label"?: InputProps['label'];
@@ -40,6 +51,10 @@ export namespace Components {
"searchTerm": SearchResultsProps['searchTerm'];
}
interface OramaText {
+ /**
+ * optionally change text alignment
+ */
+ "align"?: TextProps['align'];
/**
* it defines the HTML tag to be used
*/
@@ -65,6 +80,7 @@ export namespace Components {
}
interface SearchBox {
"color": 'dark' | 'light' | 'system';
+ "facetProperty": string;
"open": false;
"themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
}
@@ -75,7 +91,17 @@ export interface OramaInputCustomEvent extends CustomEvent {
detail: T;
target: HTMLOramaInputElement;
}
+export interface OramaSearchResultsCustomEvent extends CustomEvent {
+ detail: T;
+ target: HTMLOramaSearchResultsElement;
+}
declare global {
+ interface HTMLOramaButtonElement extends Components.OramaButton, HTMLStencilElement {
+ }
+ var HTMLOramaButtonElement: {
+ prototype: HTMLOramaButtonElement;
+ new (): HTMLOramaButtonElement;
+ };
interface HTMLOramaChatElement extends Components.OramaChat, HTMLStencilElement {
}
var HTMLOramaChatElement: {
@@ -100,6 +126,12 @@ declare global {
prototype: HTMLOramaChatUserMessageElement;
new (): HTMLOramaChatUserMessageElement;
};
+ interface HTMLOramaFacetsElement extends Components.OramaFacets, HTMLStencilElement {
+ }
+ var HTMLOramaFacetsElement: {
+ prototype: HTMLOramaFacetsElement;
+ new (): HTMLOramaFacetsElement;
+ };
interface HTMLOramaInputElementEventMap {
"oramaInputChanged": string;
}
@@ -123,7 +155,18 @@ declare global {
prototype: HTMLOramaSearchElement;
new (): HTMLOramaSearchElement;
};
+ interface HTMLOramaSearchResultsElementEventMap {
+ "oramaItemClick": SearchItem;
+ }
interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement {
+ addEventListener(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLOramaSearchResultsElement: {
prototype: HTMLOramaSearchResultsElement;
@@ -160,10 +203,12 @@ declare global {
new (): HTMLSearchBoxTogglerElement;
};
interface HTMLElementTagNameMap {
+ "orama-button": HTMLOramaButtonElement;
"orama-chat": HTMLOramaChatElement;
"orama-chat-assistent-message": HTMLOramaChatAssistentMessageElement;
"orama-chat-messages-container": HTMLOramaChatMessagesContainerElement;
"orama-chat-user-message": HTMLOramaChatUserMessageElement;
+ "orama-facets": HTMLOramaFacetsElement;
"orama-input": HTMLOramaInputElement;
"orama-search": HTMLOramaSearchElement;
"orama-search-results": HTMLOramaSearchResultsElement;
@@ -175,6 +220,12 @@ declare global {
}
}
declare namespace LocalJSX {
+ interface OramaButton {
+ "as"?: ButtonProps['as'];
+ "class"?: string;
+ "type"?: ButtonProps['type'];
+ "variant"?: ButtonProps['variant'];
+ }
interface OramaChat {
}
interface OramaChatAssistentMessage {
@@ -185,6 +236,9 @@ declare namespace LocalJSX {
interface OramaChatUserMessage {
"message"?: TChatMessage;
}
+ interface OramaFacets {
+ "facets"?: any[];
+ }
interface OramaInput {
"defaultValue"?: InputProps['defaultValue'];
"label"?: InputProps['label'];
@@ -199,9 +253,14 @@ declare namespace LocalJSX {
}
interface OramaSearchResults {
"items"?: SearchResultsProps['items'];
+ "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent) => void;
"searchTerm"?: SearchResultsProps['searchTerm'];
}
interface OramaText {
+ /**
+ * optionally change text alignment
+ */
+ "align"?: TextProps['align'];
/**
* it defines the HTML tag to be used
*/
@@ -227,16 +286,19 @@ declare namespace LocalJSX {
}
interface SearchBox {
"color"?: 'dark' | 'light' | 'system';
+ "facetProperty"?: string;
"open"?: false;
"themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
}
interface SearchBoxToggler {
}
interface IntrinsicElements {
+ "orama-button": OramaButton;
"orama-chat": OramaChat;
"orama-chat-assistent-message": OramaChatAssistentMessage;
"orama-chat-messages-container": OramaChatMessagesContainer;
"orama-chat-user-message": OramaChatUserMessage;
+ "orama-facets": OramaFacets;
"orama-input": OramaInput;
"orama-search": OramaSearch;
"orama-search-results": OramaSearchResults;
@@ -251,10 +313,12 @@ export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
+ "orama-button": LocalJSX.OramaButton & JSXBase.HTMLAttributes;
"orama-chat": LocalJSX.OramaChat & JSXBase.HTMLAttributes;
"orama-chat-assistent-message": LocalJSX.OramaChatAssistentMessage & JSXBase.HTMLAttributes;
"orama-chat-messages-container": LocalJSX.OramaChatMessagesContainer & JSXBase.HTMLAttributes;
"orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes;
+ "orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes;
"orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes;
"orama-search": LocalJSX.OramaSearch & JSXBase.HTMLAttributes;
"orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes;
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
new file mode 100644
index 00000000..7a126f6c
--- /dev/null
+++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -0,0 +1,15 @@
+.button {
+ display: inline-flex;
+ gap: var(--spacing-s, $spacing-s);
+ align-items: center;
+ border-radius: var(--radius-m, $radius-m);
+ border: 0;
+ padding: var(--spacing-m, $spacing-m);
+ cursor: pointer;
+ font-family: var(--font-primary, font('primary'));
+}
+
+.button--primary {
+ background-color: var(--button-primary-background-color);
+ color: var(--button-primary-text-color);
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
new file mode 100644
index 00000000..9b093d00
--- /dev/null
+++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -0,0 +1,55 @@
+import { Component, Prop, h, Element } from '@stencil/core'
+import { AttributeUtils } from '../../../services/AttributeUtils'
+
+type BaseProps = {
+ /** the optional class name */
+ class?: string
+ /** the style variant of the button - default is primary */
+ variant?: 'primary' | 'secondary'
+}
+
+type ConditionalProps =
+ | {
+ /** it defines the HTML tag to be used */
+ as?: 'button'
+ type: 'button' | 'submit' | 'reset'
+ }
+ | {
+ /** it defines the HTML tag to be used */
+ as?: 'a'
+ href: string
+ type?: never
+ }
+
+export type ButtonProps = BaseProps & ConditionalProps
+
+@Component({
+ tag: 'orama-button',
+ styleUrl: 'orama-button.scss',
+})
+
+/**
+ * The orama-button component is used to render a button or anchor element looking like a button.
+ */
+export class OramaButton {
+ @Element() el: HTMLButtonElement | HTMLAnchorElement
+
+ @Prop() as?: ButtonProps['as'] = 'button'
+ @Prop() class?: string
+ @Prop() variant?: ButtonProps['variant'] = 'primary'
+ @Prop() type?: ButtonProps['type']
+
+ render() {
+ const Tag = this.as
+ const declaredProps = ['as', 'class', 'variant']
+ const buttonProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps)
+
+ const buttonClass = `button button--${this.variant} ${this.class}`
+
+ return (
+
+
+
+ )
+ }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md
new file mode 100644
index 00000000..b7c9ea43
--- /dev/null
+++ b/packages/ui-stencil/src/components/internal/orama-button/readme.md
@@ -0,0 +1,33 @@
+# orama-button
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------- | --------- | ----------- | --------------------------------- | ----------- |
+| `as` | `as` | | `"a" \| "button"` | `'button'` |
+| `class` | `class` | | `string` | `undefined` |
+| `type` | `type` | | `"button" \| "reset" \| "submit"` | `undefined` |
+| `variant` | `variant` | | `"primary" \| "secondary"` | `'primary'` |
+
+
+## Dependencies
+
+### Used by
+
+ - [orama-chat](../orama-chat)
+
+### Graph
+```mermaid
+graph TD;
+ orama-chat --> orama-button
+ style orama-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
index fdafbaad..2208c4da 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -1,4 +1,4 @@
-:host {
+orama-chat-assistent-message {
display: block;
color: var(--text-color-secondary, text-color('secondary'));
}
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 1c2b366d..0fb0ce19 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
@@ -4,7 +4,6 @@ import type { TChatMessage } from '@/context/chatContext'
@Component({
tag: 'orama-chat-assistent-message',
styleUrl: 'orama-chat-assistent-message.scss',
- shadow: true,
})
export class OramaChatAssistentMessage {
@Prop() message: TChatMessage
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 a5f266cb..5ea7b543 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
@@ -9,7 +9,7 @@
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | --------------------------------------------------- | ----------- |
-| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` |
+| `message` | -- | | `{ role: "assistant" \| "user"; content: string; }` | `undefined` |
## Dependencies
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss
index 96a37c22..8557360a 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss
@@ -1,11 +1,9 @@
-:host {
+orama-chat-messages-container {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--spacing-l, $spacing-l);
overflow-y: auto;
- // TODO: Should it be a variable?
- background: linear-gradient(180deg, #000 0%, #251e37 50%);
// Maybe move somewhere else to reuse in some somponents, but not globally
&::-webkit-scrollbar {
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx
index a1c27055..b32ff1f9 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx
@@ -4,7 +4,6 @@ import { chatContext } from '@/context/chatContext'
@Component({
tag: 'orama-chat-messages-container',
styleUrl: 'orama-chat-messages-container.scss',
- shadow: true,
})
export class OramaChatMessagesContainer {
render() {
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss
index b6a743e0..426eab41 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss
@@ -1,4 +1,4 @@
-:host {
+orama-chat-user-message {
display: flex;
justify-content: end;
color: var(--text-color-primary, text-color('primary'));
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx
index 70d26e75..a7ae868e 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx
@@ -4,7 +4,6 @@ import type { TChatMessage } from '@/context/chatContext'
@Component({
tag: 'orama-chat-user-message',
styleUrl: 'orama-chat-user-message.scss',
- shadow: true,
})
export class OramaChatUserMessage {
@Prop() message: TChatMessage
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 2d09cc5e..d481cd72 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
@@ -9,7 +9,7 @@
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | --------------------------------------------------- | ----------- |
-| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` |
+| `message` | -- | | `{ role: "assistant" \| "user"; content: 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 ab231c26..9112b2fe 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
@@ -1,24 +1,21 @@
-:host {
+orama-chat {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
+ background: linear-gradient(180deg, var(--background-ai-gradient-one) 0%, var(--background-ai-gradient-two) 50%);
}
-orama-textarea {
- width: 100%;
-}
.messages-container-wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
}
-.footer-wrapper {
- background: var(--background-color-tertiary, background-color('tertiary'));
- padding: var(--spacing-m, $spacing-m) var(--spacing-l, $spacing-l) var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l);
+.chat-form-wrapper {
+ padding: var(--spacing-m, $spacing-m) var(--spacing-l, $spacing-l);
}
-.spacer {
- margin-top: var(--spacing-s, $spacing-s);
+.chat-input {
+ margin-bottom: var(--spacing-s, $spacing-s);
}
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 65b4d2fc..e3f5ed0c 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,47 +1,34 @@
import { Component, Host, State, h } from '@stencil/core'
-import { OramaClient } from '@oramacloud/client'
-import { ChatService } from '@/services/ChatService'
+import { chatContext } from '@/context/chatContext'
@Component({
tag: 'orama-chat',
styleUrl: 'orama-chat.scss',
- shadow: true,
})
export class OramaChat {
@State() inputValue = ''
- private chatService: ChatService
-
- // TODO: We probably want to use this oramaClient both in chat and search. We may want to uplift orama client to be a singleton
- componentWillLoad() {
- // TODO: Should not be hardcoded
- const oramaClient = new OramaClient({
- api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
- endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
- })
-
- this.chatService = new ChatService(oramaClient)
- }
-
handleSubmit = (e: Event) => {
e.preventDefault()
- if (!this.chatService) {
+ if (chatContext.chatService === null) {
throw new Error('Chat Service is not initialized')
}
- this.chatService.sendQuestion(this.inputValue)
+ chatContext.chatService.sendQuestion(this.inputValue)
this.inputValue = ''
}
render() {
return (
+ {/* CHAT MESSAGES */}
-