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 */} -