diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js index d2342392..f2c40bd5 100644 --- a/apps/storybook/.storybook/preview.js +++ b/apps/storybook/.storybook/preview.js @@ -5,7 +5,6 @@ defineCustomElements() /** @type { import('@storybook/html').Preview } */ const preview = { - tags: ['autodocs'], // TODO: Theme class should be a variable decorators: [(story) => `
${story()}
`], parameters: { diff --git a/apps/storybook/stories/orama-chat.stories.tsx b/apps/storybook/stories/orama-chat.stories.tsx index 7f4f677d..5b172d12 100644 --- a/apps/storybook/stories/orama-chat.stories.tsx +++ b/apps/storybook/stories/orama-chat.stories.tsx @@ -9,11 +9,16 @@ export default meta type Story = StoryObj const Template = (args) => { - return `` + return ` +
+ +
+ + ` } // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args -export const Primary: Story = { +export const OramaChat: Story = { render: Template, args: {} } diff --git a/apps/storybook/stories/orama-search.stories.tsx b/apps/storybook/stories/orama-search.stories.tsx new file mode 100644 index 00000000..cc5227e8 --- /dev/null +++ b/apps/storybook/stories/orama-search.stories.tsx @@ -0,0 +1,24 @@ +import type { StoryObj, Meta } from '@storybook/web-components' + +const meta: Meta = { + title: 'Internal/OramaSearch', + component: 'orama-search' +} + +export default meta +type Story = StoryObj + +const Template = (args) => { + return ` +
+ +
+ + ` +} + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const OramaSearch: Story = { + render: Template, + args: {} +} diff --git a/apps/storybook/stories/search-box-toggler.stories.tsx b/apps/storybook/stories/search-box-toggler.stories.tsx new file mode 100644 index 00000000..c01a8f10 --- /dev/null +++ b/apps/storybook/stories/search-box-toggler.stories.tsx @@ -0,0 +1,14 @@ +import type { StoryObj, Meta } from '@storybook/html' + +const meta: Meta = { + title: 'Public/SearchBox', + component: 'search-box-toggler' +} satisfies Meta + +export default meta +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const SearchBoxToggler: Story = { + render: () => '' +} diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx index c1cb23d0..91a56b33 100644 --- a/apps/storybook/stories/search-box.stories.tsx +++ b/apps/storybook/stories/search-box.stories.tsx @@ -2,29 +2,26 @@ import type { StoryObj, Meta } from '@storybook/html' const meta: Meta = { title: 'Public/SearchBox', - component: 'search-box', + component: 'search-box' } satisfies Meta export default meta type Story = StoryObj -const Template = (args) => { - return `` +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const SearchBox: Story = { + render: () => ` +
+ +
` } -// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args -export const Primary: Story = { - render: Template, - args: { - theme: { - colors: { - light: { - primaryColor: 'red' - }, - dark: { - primaryColor: 'blue' - } - } - } - } +export const SearchBoxWithToggler: Story = { + render: () => ` +
+ +
+ +
+
` } diff --git a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts index 002c59be..ee6ae6f5 100644 --- a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts +++ b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts @@ -28,6 +28,71 @@ export class OramaChat { export declare interface OramaChat extends Components.OramaChat {} +@ProxyCmp({ + inputs: ['message'] +}) +@Component({ + selector: 'orama-chat-assistent-message', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['message'], +}) +export class OramaChatAssistentMessage { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface OramaChatAssistentMessage extends Components.OramaChatAssistentMessage {} + + +@ProxyCmp({ +}) +@Component({ + selector: 'orama-chat-messages-container', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class OramaChatMessagesContainer { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface OramaChatMessagesContainer extends Components.OramaChatMessagesContainer {} + + +@ProxyCmp({ + inputs: ['message'] +}) +@Component({ + selector: 'orama-chat-user-message', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['message'], +}) +export class OramaChatUserMessage { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface OramaChatUserMessage extends Components.OramaChatUserMessage {} + + @ProxyCmp({ inputs: ['label', 'labelForScreenReaders', 'name', 'placeholder', 'size'] }) @@ -51,14 +116,14 @@ export declare interface OramaInput extends Components.OramaInput {} @ProxyCmp({ - inputs: ['as'] + inputs: ['as', 'class'] }) @Component({ selector: 'orama-paragraph', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['as'], + inputs: ['as', 'class'], }) export class OramaParagraph { protected el: HTMLElement; @@ -72,6 +137,27 @@ export class OramaParagraph { export declare interface OramaParagraph extends Components.OramaParagraph {} +@ProxyCmp({ +}) +@Component({ + selector: 'orama-search', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class OramaSearch { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface OramaSearch extends Components.OramaSearch {} + + @ProxyCmp({ inputs: ['as'] }) @@ -95,14 +181,14 @@ export declare interface OramaSmall extends Components.OramaSmall {} @ProxyCmp({ - inputs: ['as'] + inputs: ['as', 'class'] }) @Component({ selector: 'orama-span', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['as'], + inputs: ['as', 'class'], }) export class OramaSpan { protected el: HTMLElement; @@ -117,14 +203,14 @@ export declare interface OramaSpan extends Components.OramaSpan {} @ProxyCmp({ - inputs: ['maxRows', 'minRows', 'placeholder', 'value'] + inputs: ['autoFocus', 'maxRows', 'minRows', 'placeholder', 'value'] }) @Component({ selector: 'orama-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['maxRows', 'minRows', 'placeholder', 'value'], + inputs: ['autoFocus', 'maxRows', 'minRows', 'placeholder', 'value'], }) export class OramaTextarea { protected el: HTMLElement; @@ -139,14 +225,14 @@ export declare interface OramaTextarea extends Components.OramaTextarea {} @ProxyCmp({ - inputs: ['color', 'themeConfig'] + inputs: ['color', 'open', 'themeConfig'] }) @Component({ selector: 'search-box', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'themeConfig'], + inputs: ['color', 'open', 'themeConfig'], }) export class SearchBox { protected el: HTMLElement; @@ -160,3 +246,24 @@ export class SearchBox { export declare interface SearchBox extends Components.SearchBox {} +@ProxyCmp({ +}) +@Component({ + selector: 'search-box-toggler', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class SearchBoxToggler { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface SearchBoxToggler extends Components.SearchBoxToggler {} + + diff --git a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts index 08a61c24..9208e996 100644 --- a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts +++ b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts @@ -3,10 +3,15 @@ import * as d from './components'; export const DIRECTIVES = [ d.OramaChat, + d.OramaChatAssistentMessage, + d.OramaChatMessagesContainer, + d.OramaChatUserMessage, d.OramaInput, d.OramaParagraph, + d.OramaSearch, d.OramaSmall, d.OramaSpan, d.OramaTextarea, - d.SearchBox + d.SearchBox, + d.SearchBoxToggler ]; diff --git a/packages/ui-stencil-react/dist/components/stencil-generated/index.js b/packages/ui-stencil-react/dist/components/stencil-generated/index.js index 4ea29a3f..a7136e89 100644 --- a/packages/ui-stencil-react/dist/components/stencil-generated/index.js +++ b/packages/ui-stencil-react/dist/components/stencil-generated/index.js @@ -1,4 +1,14 @@ import { createReactComponent } from './react-component-lib'; -export const OramaP = createReactComponent('orama-p'); +export const OramaChat = createReactComponent('orama-chat'); +export const OramaChatAssistentMessage = createReactComponent('orama-chat-assistent-message'); +export const OramaChatMessagesContainer = createReactComponent('orama-chat-messages-container'); +export const OramaChatUserMessage = createReactComponent('orama-chat-user-message'); +export const OramaInput = createReactComponent('orama-input'); +export const OramaParagraph = createReactComponent('orama-paragraph'); +export const OramaSearch = createReactComponent('orama-search'); +export const OramaSmall = createReactComponent('orama-small'); +export const OramaSpan = createReactComponent('orama-span'); +export const OramaTextarea = createReactComponent('orama-textarea'); export const SearchBox = createReactComponent('search-box'); +export const SearchBoxToggler = createReactComponent('search-box-toggler'); //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/packages/ui-stencil-react/dist/components/stencil-generated/index.js.map b/packages/ui-stencil-react/dist/components/stencil-generated/index.js.map index af58ee67..40a32652 100644 --- a/packages/ui-stencil-react/dist/components/stencil-generated/index.js.map +++ b/packages/ui-stencil-react/dist/components/stencil-generated/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/stencil-generated/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAM7D,MAAM,CAAC,MAAM,MAAM,GAAgB,oBAAoB,CAAgC,SAAS,CAAC,CAAC;AAClG,MAAM,CAAC,MAAM,SAAS,GAAgB,oBAAoB,CAAsC,YAAY,CAAC,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/stencil-generated/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAM7D,MAAM,CAAC,MAAM,SAAS,GAAgB,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,yBAAyB,GAAgB,oBAAoB,CAAsE,8BAA8B,CAAC,CAAC;AAChL,MAAM,CAAC,MAAM,0BAA0B,GAAgB,oBAAoB,CAAwE,+BAA+B,CAAC,CAAC;AACpL,MAAM,CAAC,MAAM,oBAAoB,GAAgB,oBAAoB,CAA4D,yBAAyB,CAAC,CAAC;AAC5J,MAAM,CAAC,MAAM,UAAU,GAAgB,oBAAoB,CAAwC,aAAa,CAAC,CAAC;AAClH,MAAM,CAAC,MAAM,cAAc,GAAgB,oBAAoB,CAAgD,iBAAiB,CAAC,CAAC;AAClI,MAAM,CAAC,MAAM,WAAW,GAAgB,oBAAoB,CAA0C,cAAc,CAAC,CAAC;AACtH,MAAM,CAAC,MAAM,UAAU,GAAgB,oBAAoB,CAAwC,aAAa,CAAC,CAAC;AAClH,MAAM,CAAC,MAAM,SAAS,GAAgB,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,aAAa,GAAgB,oBAAoB,CAA8C,gBAAgB,CAAC,CAAC;AAC9H,MAAM,CAAC,MAAM,SAAS,GAAgB,oBAAoB,CAAsC,YAAY,CAAC,CAAC;AAC9G,MAAM,CAAC,MAAM,gBAAgB,GAAgB,oBAAoB,CAAoD,oBAAoB,CAAC,CAAC"} \ No newline at end of file diff --git a/packages/ui-stencil-react/dist/types/components/stencil-generated/index.d.ts b/packages/ui-stencil-react/dist/types/components/stencil-generated/index.d.ts index 17e06e5c..43b19031 100644 --- a/packages/ui-stencil-react/dist/types/components/stencil-generated/index.d.ts +++ b/packages/ui-stencil-react/dist/types/components/stencil-generated/index.d.ts @@ -1,2 +1,12 @@ -export declare const OramaP: import("react").ForwardRefExoticComponent; +export declare const OramaChat: import("react").ForwardRefExoticComponent; +export declare const OramaChatAssistentMessage: import("react").ForwardRefExoticComponent; +export declare const OramaChatMessagesContainer: import("react").ForwardRefExoticComponent; +export declare const OramaChatUserMessage: import("react").ForwardRefExoticComponent; +export declare const OramaInput: import("react").ForwardRefExoticComponent; +export declare const OramaParagraph: import("react").ForwardRefExoticComponent; +export declare const OramaSearch: import("react").ForwardRefExoticComponent; +export declare const OramaSmall: import("react").ForwardRefExoticComponent; +export declare const OramaSpan: import("react").ForwardRefExoticComponent; +export declare const OramaTextarea: import("react").ForwardRefExoticComponent; export declare const SearchBox: import("react").ForwardRefExoticComponent; +export declare const SearchBoxToggler: import("react").ForwardRefExoticComponent; 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 173510fa..d73c66ad 100644 --- a/packages/ui-stencil-react/src/components/stencil-generated/index.ts +++ b/packages/ui-stencil-react/src/components/stencil-generated/index.ts @@ -8,9 +8,14 @@ import type { JSX } from 'orama-ui'; 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 OramaInput = /*@__PURE__*/createReactComponent('orama-input'); export const OramaParagraph = /*@__PURE__*/createReactComponent('orama-paragraph'); +export const OramaSearch = /*@__PURE__*/createReactComponent('orama-search'); export const OramaSmall = /*@__PURE__*/createReactComponent('orama-small'); export const OramaSpan = /*@__PURE__*/createReactComponent('orama-span'); export const OramaTextarea = /*@__PURE__*/createReactComponent('orama-textarea'); export const SearchBox = /*@__PURE__*/createReactComponent('search-box'); +export const SearchBoxToggler = /*@__PURE__*/createReactComponent('search-box-toggler'); diff --git a/packages/ui-stencil-vue/dist/components.d.ts b/packages/ui-stencil-vue/dist/components.d.ts index 3f3ce15b..d3636d27 100644 --- a/packages/ui-stencil-vue/dist/components.d.ts +++ b/packages/ui-stencil-vue/dist/components.d.ts @@ -1,2 +1,12 @@ -export declare const OramaP: import("vue").DefineSetupFnComponent; +export declare const OramaChat: import("vue").DefineSetupFnComponent; +export declare const OramaChatAssistentMessage: import("vue").DefineSetupFnComponent; +export declare const OramaChatMessagesContainer: import("vue").DefineSetupFnComponent; +export declare const OramaChatUserMessage: import("vue").DefineSetupFnComponent; +export declare const OramaInput: import("vue").DefineSetupFnComponent; +export declare const OramaParagraph: import("vue").DefineSetupFnComponent; +export declare const OramaSearch: import("vue").DefineSetupFnComponent; +export declare const OramaSmall: import("vue").DefineSetupFnComponent; +export declare const OramaSpan: import("vue").DefineSetupFnComponent; +export declare const OramaTextarea: import("vue").DefineSetupFnComponent; export declare const SearchBox: import("vue").DefineSetupFnComponent; +export declare const SearchBoxToggler: import("vue").DefineSetupFnComponent; diff --git a/packages/ui-stencil-vue/dist/components.js b/packages/ui-stencil-vue/dist/components.js index b301ee13..9150ffab 100644 --- a/packages/ui-stencil-vue/dist/components.js +++ b/packages/ui-stencil-vue/dist/components.js @@ -1,7 +1,42 @@ import { defineContainer } from './vue-component-lib/utils'; -export const OramaP = defineContainer('orama-p', undefined); +export const OramaChat = defineContainer('orama-chat', undefined); +export const OramaChatAssistentMessage = defineContainer('orama-chat-assistent-message', undefined, [ + 'message' +]); +export const OramaChatMessagesContainer = defineContainer('orama-chat-messages-container', undefined); +export const OramaChatUserMessage = defineContainer('orama-chat-user-message', undefined, [ + 'message' +]); +export const OramaInput = defineContainer('orama-input', undefined, [ + 'name', + 'placeholder', + 'size', + 'label', + 'labelForScreenReaders' +]); +export const OramaParagraph = defineContainer('orama-paragraph', undefined, [ + 'as', + 'class' +]); +export const OramaSearch = defineContainer('orama-search', undefined); +export const OramaSmall = defineContainer('orama-small', undefined, [ + 'as' +]); +export const OramaSpan = defineContainer('orama-span', undefined, [ + 'as', + 'class' +]); +export const OramaTextarea = defineContainer('orama-textarea', undefined, [ + 'value', + 'maxRows', + 'minRows', + 'placeholder', + 'autoFocus' +]); export const SearchBox = defineContainer('search-box', undefined, [ 'themeConfig', - 'color' + 'color', + 'open' ]); +export const SearchBoxToggler = defineContainer('search-box-toggler', undefined); //# sourceMappingURL=components.js.map \ No newline at end of file diff --git a/packages/ui-stencil-vue/dist/components.js.map b/packages/ui-stencil-vue/dist/components.js.map index eb489822..740aa703 100644 --- a/packages/ui-stencil-vue/dist/components.js.map +++ b/packages/ui-stencil-vue/dist/components.js.map @@ -1 +1 @@ -{"version":3,"file":"components.js","sourceRoot":"","sources":["../lib/components.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAO5D,MAAM,CAAC,MAAM,MAAM,GAAiB,eAAe,CAAa,SAAS,EAAE,SAAS,CAAC,CAAC;AAGtF,MAAM,CAAC,MAAM,SAAS,GAAiB,eAAe,CAAgB,YAAY,EAAE,SAAS,EAAE;IAC7F,aAAa;IACb,OAAO;CACR,CAAC,CAAC"} \ No newline at end of file +{"version":3,"file":"components.js","sourceRoot":"","sources":["../lib/components.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAO5D,MAAM,CAAC,MAAM,SAAS,GAAiB,eAAe,CAAgB,YAAY,EAAE,SAAS,CAAC,CAAC;AAG/F,MAAM,CAAC,MAAM,yBAAyB,GAAiB,eAAe,CAAgC,8BAA8B,EAAE,SAAS,EAAE;IAC/I,SAAS;CACV,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,0BAA0B,GAAiB,eAAe,CAAiC,+BAA+B,EAAE,SAAS,CAAC,CAAC;AAGpJ,MAAM,CAAC,MAAM,oBAAoB,GAAiB,eAAe,CAA2B,yBAAyB,EAAE,SAAS,EAAE;IAChI,SAAS;CACV,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,UAAU,GAAiB,eAAe,CAAiB,aAAa,EAAE,SAAS,EAAE;IAChG,MAAM;IACN,aAAa;IACb,MAAM;IACN,OAAO;IACP,uBAAuB;CACxB,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,cAAc,GAAiB,eAAe,CAAqB,iBAAiB,EAAE,SAAS,EAAE;IAC5G,IAAI;IACJ,OAAO;CACR,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,WAAW,GAAiB,eAAe,CAAkB,cAAc,EAAE,SAAS,CAAC,CAAC;AAGrG,MAAM,CAAC,MAAM,UAAU,GAAiB,eAAe,CAAiB,aAAa,EAAE,SAAS,EAAE;IAChG,IAAI;CACL,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAAiB,eAAe,CAAgB,YAAY,EAAE,SAAS,EAAE;IAC7F,IAAI;IACJ,OAAO;CACR,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,aAAa,GAAiB,eAAe,CAAoB,gBAAgB,EAAE,SAAS,EAAE;IACzG,OAAO;IACP,SAAS;IACT,SAAS;IACT,aAAa;IACb,WAAW;CACZ,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAAiB,eAAe,CAAgB,YAAY,EAAE,SAAS,EAAE;IAC7F,aAAa;IACb,OAAO;IACP,MAAM;CACP,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,gBAAgB,GAAiB,eAAe,CAAuB,oBAAoB,EAAE,SAAS,CAAC,CAAC"} \ No newline at end of file diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 15d7e07a..5a4dc95b 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -11,6 +11,19 @@ import type { JSX } from 'orama-ui'; export const OramaChat = /*@__PURE__*/ defineContainer('orama-chat', undefined); +export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer('orama-chat-assistent-message', undefined, [ + 'message' +]); + + +export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer('orama-chat-messages-container', undefined); + + +export const OramaChatUserMessage = /*@__PURE__*/ defineContainer('orama-chat-user-message', undefined, [ + 'message' +]); + + export const OramaInput = /*@__PURE__*/ defineContainer('orama-input', undefined, [ 'name', 'placeholder', @@ -21,17 +34,22 @@ export const OramaInput = /*@__PURE__*/ defineContainer('orama-i export const OramaParagraph = /*@__PURE__*/ defineContainer('orama-paragraph', undefined, [ - 'as' + 'as', + 'class' ]); +export const OramaSearch = /*@__PURE__*/ defineContainer('orama-search', undefined); + + export const OramaSmall = /*@__PURE__*/ defineContainer('orama-small', undefined, [ 'as' ]); export const OramaSpan = /*@__PURE__*/ defineContainer('orama-span', undefined, [ - 'as' + 'as', + 'class' ]); @@ -39,12 +57,17 @@ export const OramaTextarea = /*@__PURE__*/ defineContainer('o 'value', 'maxRows', 'minRows', - 'placeholder' + 'placeholder', + 'autoFocus' ]); export const SearchBox = /*@__PURE__*/ defineContainer('search-box', undefined, [ 'themeConfig', - 'color' + 'color', + 'open' ]); + +export const SearchBoxToggler = /*@__PURE__*/ defineContainer('search-box-toggler', undefined); + diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index a34a7f3d..edbc75d3 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -5,10 +5,12 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { TChatMessage } from "./context/chatContext"; import { InputProps } from "./components/internal/Form/Input"; import { ParagraphProps } from "./components/internal/Typography/Paragraph"; import { SmallProps } from "./components/internal/Typography/Small"; import { SpanProps } from "./components/internal/Typography/Span"; +export { TChatMessage } from "./context/chatContext"; export { InputProps } from "./components/internal/Form/Input"; export { ParagraphProps } from "./components/internal/Typography/Paragraph"; export { SmallProps } from "./components/internal/Typography/Small"; @@ -16,6 +18,14 @@ export { SpanProps } from "./components/internal/Typography/Span"; export namespace Components { interface OramaChat { } + interface OramaChatAssistentMessage { + "message": TChatMessage; + } + interface OramaChatMessagesContainer { + } + interface OramaChatUserMessage { + "message": TChatMessage; + } interface OramaInput { "label"?: InputProps['label']; "labelForScreenReaders"?: InputProps['labelForScreenReaders']; @@ -25,14 +35,19 @@ export namespace Components { } interface OramaParagraph { "as"?: ParagraphProps['as']; + "class": string; + } + interface OramaSearch { } interface OramaSmall { "as"?: SmallProps['as']; } interface OramaSpan { "as"?: SpanProps['as']; + "class": string; } interface OramaTextarea { + "autoFocus": boolean; "maxRows": number | string; "minRows": number | string; "placeholder": string; @@ -40,8 +55,11 @@ export namespace Components { } interface SearchBox { "color": 'dark' | 'light' | 'system'; + "open": false; "themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } }; } + interface SearchBoxToggler { + } } declare global { interface HTMLOramaChatElement extends Components.OramaChat, HTMLStencilElement { @@ -50,6 +68,24 @@ declare global { prototype: HTMLOramaChatElement; new (): HTMLOramaChatElement; }; + interface HTMLOramaChatAssistentMessageElement extends Components.OramaChatAssistentMessage, HTMLStencilElement { + } + var HTMLOramaChatAssistentMessageElement: { + prototype: HTMLOramaChatAssistentMessageElement; + new (): HTMLOramaChatAssistentMessageElement; + }; + interface HTMLOramaChatMessagesContainerElement extends Components.OramaChatMessagesContainer, HTMLStencilElement { + } + var HTMLOramaChatMessagesContainerElement: { + prototype: HTMLOramaChatMessagesContainerElement; + new (): HTMLOramaChatMessagesContainerElement; + }; + interface HTMLOramaChatUserMessageElement extends Components.OramaChatUserMessage, HTMLStencilElement { + } + var HTMLOramaChatUserMessageElement: { + prototype: HTMLOramaChatUserMessageElement; + new (): HTMLOramaChatUserMessageElement; + }; interface HTMLOramaInputElement extends Components.OramaInput, HTMLStencilElement { } var HTMLOramaInputElement: { @@ -62,6 +98,12 @@ declare global { prototype: HTMLOramaParagraphElement; new (): HTMLOramaParagraphElement; }; + interface HTMLOramaSearchElement extends Components.OramaSearch, HTMLStencilElement { + } + var HTMLOramaSearchElement: { + prototype: HTMLOramaSearchElement; + new (): HTMLOramaSearchElement; + }; interface HTMLOramaSmallElement extends Components.OramaSmall, HTMLStencilElement { } var HTMLOramaSmallElement: { @@ -86,19 +128,38 @@ declare global { prototype: HTMLSearchBoxElement; new (): HTMLSearchBoxElement; }; + interface HTMLSearchBoxTogglerElement extends Components.SearchBoxToggler, HTMLStencilElement { + } + var HTMLSearchBoxTogglerElement: { + prototype: HTMLSearchBoxTogglerElement; + new (): HTMLSearchBoxTogglerElement; + }; interface HTMLElementTagNameMap { "orama-chat": HTMLOramaChatElement; + "orama-chat-assistent-message": HTMLOramaChatAssistentMessageElement; + "orama-chat-messages-container": HTMLOramaChatMessagesContainerElement; + "orama-chat-user-message": HTMLOramaChatUserMessageElement; "orama-input": HTMLOramaInputElement; "orama-paragraph": HTMLOramaParagraphElement; + "orama-search": HTMLOramaSearchElement; "orama-small": HTMLOramaSmallElement; "orama-span": HTMLOramaSpanElement; "orama-textarea": HTMLOramaTextareaElement; "search-box": HTMLSearchBoxElement; + "search-box-toggler": HTMLSearchBoxTogglerElement; } } declare namespace LocalJSX { interface OramaChat { } + interface OramaChatAssistentMessage { + "message"?: TChatMessage; + } + interface OramaChatMessagesContainer { + } + interface OramaChatUserMessage { + "message"?: TChatMessage; + } interface OramaInput { "label"?: InputProps['label']; "labelForScreenReaders"?: InputProps['labelForScreenReaders']; @@ -108,14 +169,19 @@ declare namespace LocalJSX { } interface OramaParagraph { "as"?: ParagraphProps['as']; + "class"?: string; + } + interface OramaSearch { } interface OramaSmall { "as"?: SmallProps['as']; } interface OramaSpan { "as"?: SpanProps['as']; + "class"?: string; } interface OramaTextarea { + "autoFocus"?: boolean; "maxRows"?: number | string; "minRows"?: number | string; "placeholder"?: string; @@ -123,16 +189,24 @@ declare namespace LocalJSX { } interface SearchBox { "color"?: 'dark' | 'light' | 'system'; + "open"?: false; "themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } }; } + interface SearchBoxToggler { + } interface IntrinsicElements { "orama-chat": OramaChat; + "orama-chat-assistent-message": OramaChatAssistentMessage; + "orama-chat-messages-container": OramaChatMessagesContainer; + "orama-chat-user-message": OramaChatUserMessage; "orama-input": OramaInput; "orama-paragraph": OramaParagraph; + "orama-search": OramaSearch; "orama-small": OramaSmall; "orama-span": OramaSpan; "orama-textarea": OramaTextarea; "search-box": SearchBox; + "search-box-toggler": SearchBoxToggler; } } export { LocalJSX as JSX }; @@ -140,12 +214,17 @@ declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "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-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes; "orama-paragraph": LocalJSX.OramaParagraph & JSXBase.HTMLAttributes; + "orama-search": LocalJSX.OramaSearch & JSXBase.HTMLAttributes; "orama-small": LocalJSX.OramaSmall & JSXBase.HTMLAttributes; "orama-span": LocalJSX.OramaSpan & JSXBase.HTMLAttributes; "orama-textarea": LocalJSX.OramaTextarea & JSXBase.HTMLAttributes; "search-box": LocalJSX.SearchBox & JSXBase.HTMLAttributes; + "search-box-toggler": LocalJSX.SearchBoxToggler & JSXBase.HTMLAttributes; } } } diff --git a/packages/ui-stencil/src/components/SearchBox/SearchBox.tsx b/packages/ui-stencil/src/components/SearchBox/SearchBox.tsx deleted file mode 100644 index b92d7747..00000000 --- a/packages/ui-stencil/src/components/SearchBox/SearchBox.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Component, Host, Prop, h } from '@stencil/core' -import { sassVariables } from '../../config/colors' - -@Component({ - tag: 'search-box', - styleUrl: 'searchbox.scss', - shadow: true -}) -export class SearchBox { - @Prop() themeConfig: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } } - @Prop() color: 'dark' | 'light' | 'system' - - render() { - console.log('***vars 1***', sassVariables, typeof sassVariables) - - return ( - - - - This is the searchbox - - - - ) - } -} diff --git a/packages/ui-stencil/src/components/SearchBox/searchbox.scss b/packages/ui-stencil/src/components/SearchBox/searchbox.scss deleted file mode 100644 index 7df21cf4..00000000 --- a/packages/ui-stencil/src/components/SearchBox/searchbox.scss +++ /dev/null @@ -1,6 +0,0 @@ -:host { -} - -.btn { - color: var(--primary-color, red); -} diff --git a/packages/ui-stencil/src/components/internal/Form/Input.tsx b/packages/ui-stencil/src/components/internal/Form/Input.tsx index 5ab75a5a..0f0f015b 100644 --- a/packages/ui-stencil/src/components/internal/Form/Input.tsx +++ b/packages/ui-stencil/src/components/internal/Form/Input.tsx @@ -29,6 +29,7 @@ export class Input { @Prop() label?: InputProps['label'] @Prop() labelForScreenReaders?: InputProps['labelForScreenReaders'] + // TODO: It probably should be a prop as well @State() value = '' render() { diff --git a/packages/ui-stencil/src/components/internal/Form/readme.md b/packages/ui-stencil/src/components/internal/Form/readme.md index 74625e3e..07237b56 100644 --- a/packages/ui-stencil/src/components/internal/Form/readme.md +++ b/packages/ui-stencil/src/components/internal/Form/readme.md @@ -16,6 +16,19 @@ | `size` | `size` | | `"large" \| "medium" \| "small"` | `'medium'` | +## Dependencies + +### Used by + + - [orama-search](../orama-search) + +### Graph +```mermaid +graph TD; + orama-search --> orama-input + style orama-input fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ui-stencil/src/components/internal/Typography/Paragraph.tsx b/packages/ui-stencil/src/components/internal/Typography/Paragraph.tsx index 3df39d60..867e5df6 100644 --- a/packages/ui-stencil/src/components/internal/Typography/Paragraph.tsx +++ b/packages/ui-stencil/src/components/internal/Typography/Paragraph.tsx @@ -1,10 +1,10 @@ -import { Component, Prop, h } from '@stencil/core'; +import { Component, Prop, h } from '@stencil/core' export interface ParagraphProps { as?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'small' | 'a' } @Component({ tag: 'orama-paragraph', - styleUrl: 'typography.scss', + styleUrl: 'typography.scss' }) /** @@ -13,14 +13,21 @@ export interface ParagraphProps { */ export class Paragraph implements ParagraphProps { @Prop() as?: ParagraphProps['as'] + @Prop() class: string render() { - const Tag = this.as || 'p'; + const Tag = this.as || 'p' return ( - - - - ); + + + + + + ) } } diff --git a/packages/ui-stencil/src/components/internal/Typography/Span.tsx b/packages/ui-stencil/src/components/internal/Typography/Span.tsx index 44f48794..16612519 100644 --- a/packages/ui-stencil/src/components/internal/Typography/Span.tsx +++ b/packages/ui-stencil/src/components/internal/Typography/Span.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h } from '@stencil/core'; +import { Component, Prop, h } from '@stencil/core' export type SpanProps = { as?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'small' | 'a' @@ -6,19 +6,19 @@ export type SpanProps = { @Component({ tag: 'orama-span', - styleUrl: 'typography.scss', + styleUrl: 'typography.scss' }) - export class Span implements SpanProps { @Prop() as?: SpanProps['as'] + @Prop() class: string render() { - const Tag = this.as || 'span'; + const Tag = this.as || 'span' return ( - + - ); + ) } } diff --git a/packages/ui-stencil/src/components/internal/Typography/readme.md b/packages/ui-stencil/src/components/internal/Typography/readme.md index b884e599..b15407cd 100644 --- a/packages/ui-stencil/src/components/internal/Typography/readme.md +++ b/packages/ui-stencil/src/components/internal/Typography/readme.md @@ -10,8 +10,22 @@ | Property | Attribute | Description | Type | Default | | -------- | --------- | ----------- | --------------------------------------------------------------------------------- | ----------- | | `as` | `as` | | `"a" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "small" \| "span"` | `undefined` | +| `class` | `class` | | `string` | `undefined` | +## Dependencies + +### Used by + + - [orama-chat-assistent-message](../orama-chat-messages-container/orama-chat-assistent-message) + +### Graph +```mermaid +graph TD; + orama-chat-assistent-message --> orama-span + style orama-span 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 new file mode 100644 index 00000000..fdafbaad --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss @@ -0,0 +1,61 @@ +:host { + display: block; + color: var(--text-color-secondary, text-color('secondary')); +} + +.message-wrapper { + background: var(--background-color-secondary, background-color('secondary')); + border-radius: var(--radius-m, $radius-m); + padding: var(--spacing-m, $spacing-m); + margin: 0 var(--spacing-l, $spacing-l); + + .message-actions { + display: flex; + margin-top: var(--spacing-xl, $spacing-xl); + gap: var(--spacing-l, $spacing-l); + justify-content: end; + + > * { + cursor: pointer; + } + } +} + +.sources-wrapper { + display: flex; + margin-top: var(--spacing-s, $spacing-s); + padding: 0 var(--spacing-l, $spacing-l); + gap: var(--spacing-s, $spacing-s); + overflow-x: auto; + scrollbar-width: none; +} + +.source { + position: relative; + overflow: hidden; + width: 180px; + flex-grow: 0; + flex-shrink: 0; + + & ::after { + content: ''; + pointer-events: none; + position: absolute; + inset: 0; + background: linear-gradient(90deg, transparent 70%, var(--background-color-secondary, background-color('secondary')) 95%); + } + + padding: var(--spacing-m, $spacing-m); + border-radius: var(--radius-s, $radius-s); + background: var(--background-color-secondary, background-color('secondary')); + + .source-title { + color: var(--text-color-secondary, text-color('secondary')); + white-space: nowrap; + } + + .source-subtitle { + color: var(--text-color-tertiary, text-color('tertiary')); + white-space: nowrap; + } +} 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 new file mode 100644 index 00000000..a6e34970 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx @@ -0,0 +1,62 @@ +import { Component, Host, Prop, h } from '@stencil/core' +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 + + render() { + return ( + +
+
{this.message.content}
+
+
BTN
+
BTN
+
BTN
+
+
+
+ {/* TODO: We need to have a way to display this title only for screen readers so we can improve accessibility */} + {/*

Sources

*/} +
+ + Title title title + + + Subtitle subtitle subtitle + +
+
+ + Title title title + + + Subtitle subtitle subtitle + +
+
+ + Title title title + + + Subtitle subtitle subtitle + +
+
+ + Title title title + + + Subtitle subtitle subtitle + +
+
+ + ) + } +} 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 new file mode 100644 index 00000000..ff1b74e5 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md @@ -0,0 +1,35 @@ +# orama-chat-assistent-message + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | --------------------------------------------------- | ----------- | +| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` | + + +## Dependencies + +### Used by + + - [orama-chat-messages-container](..) + +### Depends on + +- [orama-span](../../Typography) + +### Graph +```mermaid +graph TD; + orama-chat-assistent-message --> orama-span + orama-chat-messages-container --> orama-chat-assistent-message + style orama-chat-assistent-message 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-messages-container.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss new file mode 100644 index 00000000..96a37c22 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss @@ -0,0 +1,29 @@ +:host { + 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 { + width: 0.3em; + } + &::-webkit-scrollbar-track { + background: transparent; + } + &::-webkit-scrollbar-thumb { + // TODO: Should it be a variable? + background-color: #b2b2b285; + border-radius: var(--border-radius-l, $radius-l); + } +} + +.messages-container { + display: flex; + flex-direction: column; + margin: var(--spacing-l, $spacing-l) 0; + gap: var(--spacing-l, $spacing-l); +} 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 new file mode 100644 index 00000000..3beee082 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx @@ -0,0 +1,28 @@ +import { Component, Host, h } from '@stencil/core' +import { chatContext } from '../../../context/chatContext' + +@Component({ + tag: 'orama-chat-messages-container', + styleUrl: 'orama-chat-messages-container.scss', + shadow: true +}) +export class OramaChatMessagesContainer { + render() { + console.log() + return ( + +
+ {chatContext.messages.map((message, index) => + message.role === 'user' ? ( + // biome-ignore lint/suspicious/noArrayIndexKey: There is not other key available form SDK right now + + ) : ( + // biome-ignore lint/suspicious/noArrayIndexKey: There is not other key available form SDK right now + + ) + )} +
+ + ) + } +} 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 new file mode 100644 index 00000000..b6a743e0 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss @@ -0,0 +1,12 @@ +:host { + display: flex; + justify-content: end; + color: var(--text-color-primary, text-color('primary')); + padding: 0 var(--spacing-l, $spacing-l); +} + +.message-wrapper { + background: var(--background-color-fourth, background-color('fourth')); + border-radius: var(--radius-s, $radius-s); + padding: var(--radius-s, $radius-s) var(--radius-m, $radius-m); +} 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 new file mode 100644 index 00000000..bc39c1d7 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx @@ -0,0 +1,19 @@ +import { Component, Host, Prop, h } from '@stencil/core' +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 + + render() { + return ( + +
{this.message.content}
+ + ) + } +} 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 new file mode 100644 index 00000000..2d09cc5e --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/readme.md @@ -0,0 +1,30 @@ +# orama-chat-user-message + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | --------------------------------------------------- | ----------- | +| `message` | -- | | `{ role: "user" \| "assistant"; content: string; }` | `undefined` | + + +## Dependencies + +### Used by + + - [orama-chat-messages-container](..) + +### Graph +```mermaid +graph TD; + orama-chat-messages-container --> orama-chat-user-message + style orama-chat-user-message 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/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md new file mode 100644 index 00000000..0650ff19 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md @@ -0,0 +1,31 @@ +# orama-chat-messages-container + + + + + + +## Dependencies + +### Used by + + - [orama-chat](../orama-chat) + +### Depends on + +- [orama-chat-user-message](orama-chat-user-message) +- [orama-chat-assistent-message](orama-chat-assistent-message) + +### Graph +```mermaid +graph TD; + orama-chat-messages-container --> orama-chat-user-message + orama-chat-messages-container --> orama-chat-assistent-message + orama-chat-assistent-message --> orama-span + orama-chat --> orama-chat-messages-container + style orama-chat-messages-container fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* 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 new file mode 100644 index 00000000..ab231c26 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss @@ -0,0 +1,24 @@ +:host { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; +} + +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); +} + +.spacer { + margin-top: 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 new file mode 100644 index 00000000..fe1a6e3a --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -0,0 +1,75 @@ +import { Component, Host, State, h } from '@stencil/core' +import { OramaClient } from '@oramacloud/client' +import { ChatService } from '../../../services/ChatService' + +@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) { + throw new Error('Chat Service is not initialized') + } + + this.chatService.sendQuestion(this.inputValue) + this.inputValue = '' + } + + render() { + return ( + + + +
+
+
+ { + if (e.key === 'Enter' && !e.shiftKey) { + this.handleSubmit(e) + e.preventDefault() + } + }} + onInput={(e: Event) => { + this.inputValue = (e.target as HTMLInputElement).value + }} + > +
+ +
+ +
+
+
+ + Orama can make mistakes. Lorem ipsum dolor sit amet + +
+ + ) + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md new file mode 100644 index 00000000..279ffecc --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -0,0 +1,35 @@ +# orama-chat + + + + + + +## Dependencies + +### Used by + + - [search-box](../../search-box) + +### Depends on + +- [orama-chat-messages-container](../orama-chat-messages-container) +- [orama-textarea](../orama-textarea) +- [orama-small](../Typography) + +### Graph +```mermaid +graph TD; + orama-chat --> orama-chat-messages-container + orama-chat --> orama-textarea + orama-chat --> orama-small + orama-chat-messages-container --> orama-chat-user-message + orama-chat-messages-container --> orama-chat-assistent-message + orama-chat-assistent-message --> orama-span + search-box --> orama-chat + style orama-chat fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss new file mode 100644 index 00000000..454f00c0 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + flex-grow: 1; +} diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx new file mode 100644 index 00000000..85ddb58b --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx @@ -0,0 +1,67 @@ +import { OramaClient } from '@oramacloud/client' +import { Component, Host, State, Watch, h } from '@stencil/core' +import { SearchService } from '../../../services/SearchService' +import { searchContext } from '../../../context/searchContext' + +@Component({ + tag: 'orama-search', + styleUrl: 'orama-search.scss', + shadow: true +}) +export class OramaSearch { + private searchService!: SearchService + + @State() inputValue = '' + + // 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.searchService = new SearchService(oramaClient) + } + + @Watch('inputValue') + handleInputValueChange(newValue: string) { + this.searchService.search(newValue) + console.log(searchContext.hits) + } + + render() { + return ( + +
+

Search Placeholder

+
+ {searchContext.hits.map((hit) => ( +
+
{hit.document.title}
+
{hit.document.content}
+
+ ))} +
+
+
+ (this.inputValue = (e.target as HTMLInputElement).value)} + /> +
+ + ) + } +} diff --git a/packages/ui-stencil/src/components/internal/orama-search/readme.md b/packages/ui-stencil/src/components/internal/orama-search/readme.md new file mode 100644 index 00000000..3b091139 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-search/readme.md @@ -0,0 +1,28 @@ +# orama-search + + + + + + +## Dependencies + +### Used by + + - [search-box](../../search-box) + +### Depends on + +- [orama-input](../Form) + +### Graph +```mermaid +graph TD; + orama-search --> orama-input + search-box --> orama-search + style orama-search fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss index 1f4d6791..09acb470 100644 --- a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss +++ b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss @@ -2,14 +2,13 @@ position: relative; display: inline-flex; align-items: center; - padding: var(--spacing-m, $spacing-m) 0; - border-radius: var(--radius-l, $radius-l); - border: 1px solid var(--border-color-primary, border-color('primary')); background: var(--background-color-secondary, background-color('secondary')); color: var(--text-color-secondary, text-color('secondary')); + + box-shadow: 0px 4px 24px 0px #000; } ::slotted([slot='adornment-start']) { @@ -32,7 +31,6 @@ textarea { left: 0; right: 0; - // TODO: Fix hardcoded padding padding: 0px var(--spacing-m, $spacing-m); resize: none; border: none; @@ -44,7 +42,7 @@ textarea { font-family: inherit; width: 100%; - transition: max-height 0.2s; + transition: height 0.1s; &::placeholder { color: var(--text-color-inactive, text-color('inactive')); @@ -57,16 +55,13 @@ textarea { // Maybe move somewhere else to reuse in some somponents, but not globally &::-webkit-scrollbar { - width: 0.2em; + width: 0.3em; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { - background-color: #ffffff85; - border-radius: 8px; - } - &::-webkit-scrollbar-thumb:hover { - background-color: #ffffff85; + background-color: #b2b2b285; + border-radius: var(--border-radius-l, $radius-l); } } diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx index d0b86327..108d4805 100644 --- a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx +++ b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx @@ -12,6 +12,7 @@ export class OramaTextarea { @Prop() maxRows: number | string @Prop() minRows: number | string = 1 @Prop() placeholder: string + @Prop() autoFocus = false @State() height: number @State() startAdornmentWidth: number @@ -26,7 +27,6 @@ export class OramaTextarea { this.endAdornmentWidth = this.getNamedSlotWidth('adornment-end') } - // TODO: Use to calculate adornment width later getNamedSlotWidth(slotName: string) { const slot = this.el.shadowRoot.querySelector(`slot[name="${slotName}"]`) as HTMLSlotElement if (slot) { @@ -128,6 +128,7 @@ export class OramaTextarea { } render() { + console.log(this.autoFocus) return ( {/* TODO: We should calculate the adormnent width dinamically and apply the appding to the textarea */} @@ -136,6 +137,7 @@ export class OramaTextarea {