From 359a9ba2e38b96a97e618e7f2c14bbbaf8a467e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Mon, 25 Nov 2024 01:03:33 -0300 Subject: [PATCH 1/2] feat: allow user to prevent default on markdown link event --- apps/demo-react/src/App.tsx | 12 ++ packages/ui-stencil-vue/lib/components.ts | 23 +++- packages/ui-stencil/src/components.d.ts | 54 +++++++- .../orama-chat-assistent-message.tsx | 14 +- .../orama-markdown/orama-markdown.tsx | 121 +++++++++++------- .../orama-markdown/readme.md | 15 ++- .../orama-sources/readme.md | 2 +- .../orama-chat-assistent-message/readme.md | 8 +- .../orama-chat-messages-container.tsx | 10 +- .../orama-chat-messages-container/readme.md | 8 +- .../internal/orama-chat/orama-chat.tsx | 19 ++- .../components/internal/orama-chat/readme.md | 26 ++-- .../internal/orama-footer/readme.md | 2 +- .../orama-chat-box/orama-chat-box.tsx | 17 ++- .../src/components/orama-chat-box/readme.md | 35 ++--- .../orama-search-box/orama-search-box.tsx | 22 +++- .../src/components/orama-search-box/readme.md | 59 +++++---- packages/ui-stencil/src/types/index.ts | 4 + scripts/release.mjs | 60 +++++---- 19 files changed, 351 insertions(+), 160 deletions(-) diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx index 16607d41..8ce1e951 100644 --- a/apps/demo-react/src/App.tsx +++ b/apps/demo-react/src/App.tsx @@ -29,6 +29,12 @@ function App() { style={{ height: '600px' }} onAnswerSourceClick={(e: Event) => console.log(e)} onAnswerGenerated={(e: Event) => console.log(e)} + chatMarkdownLinkTitle={({ text }) => text?.toUpperCase()} + chatMarkdownLinkHref={({ href }) => href} + onChatMarkdownLinkClicked={(e: Event) => { + console.log(e) + e.preventDefault() + }} /> @@ -76,6 +82,12 @@ function App() { console.log(e) e.preventDefault() }} + chatMarkdownLinkTitle={({ text }) => text?.toUpperCase()} + chatMarkdownLinkHref={({ href }) => href} + onChatMarkdownLinkClicked={(e: Event) => { + console.log(e) + e.preventDefault() + }} /> diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index ce2ed0f7..2e1ede59 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -30,12 +30,16 @@ export const OramaChat = /*@__PURE__*/ defineContainer('orama-cha 'focusInput', 'suggestions', 'systemPrompts', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref', 'answerGenerated' ]); export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer('orama-chat-assistent-message', undefined, [ - 'interaction' + 'interaction', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref' ]); @@ -50,8 +54,11 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer('ora 'suggestions', 'autoFocus', 'systemPrompts', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref', 'answerGenerated', - 'answerSourceClick' + 'answerSourceClick', + 'chatMarkdownLinkClicked' ]); @@ -65,6 +72,8 @@ export const OramaChatButton = /*@__PURE__*/ defineContainer('orama-chat-messages-container', undefined, [ 'interactions', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref', 'answerGenerated' ]); @@ -112,7 +121,10 @@ export const OramaLogoIcon = /*@__PURE__*/ defineContainer('o export const OramaMarkdown = /*@__PURE__*/ defineContainer('orama-markdown', undefined, [ - 'content' + 'content', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref', + 'chatMarkdownLinkClicked' ]); @@ -168,10 +180,13 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( 'searchPlaceholder', 'suggestions', 'searchParams', + 'chatMarkdownLinkTitle', + 'chatMarkdownLinkHref', 'searchCompleted', 'searchResultClick', 'answerGenerated', - 'answerSourceClick' + 'answerSourceClick', + 'chatMarkdownLinkClicked' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 6f4c49ca..bbeb1571 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -6,7 +6,7 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { ButtonProps } from "./components/internal/orama-button/orama-button"; -import { CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +import { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; import { TChatInteraction } from "./context/chatContext"; import { OramaClient } from "@oramacloud/client"; import { InputProps } from "./components/internal/orama-input/orama-input"; @@ -18,7 +18,7 @@ import { TThemeOverrides as TThemeOverrides1 } from "./components.d"; import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; import { TextProps } from "./components/internal/orama-text/orama-text"; export { ButtonProps } from "./components/internal/orama-button/orama-button"; -export { CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +export { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; export { TChatInteraction } from "./context/chatContext"; export { OramaClient } from "@oramacloud/client"; export { InputProps } from "./components/internal/orama-input/orama-input"; @@ -40,6 +40,8 @@ export namespace Components { "withTooltip"?: string; } interface OramaChat { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "defaultTerm"?: string; "focusInput"?: boolean; "linksRel"?: string; @@ -52,10 +54,14 @@ export namespace Components { "systemPrompts"?: string[]; } interface OramaChatAssistentMessage { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interaction": TChatInteraction; } interface OramaChatBox { "autoFocus": boolean; + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "clientInstance"?: OramaClient; "index"?: CloudIndexConfig; "linksRel"?: string; @@ -73,6 +79,8 @@ export namespace Components { "label": string; } interface OramaChatMessagesContainer { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interactions": TChatInteraction[]; } interface OramaChatUserMessage { @@ -105,6 +113,8 @@ export namespace Components { "size": number; } interface OramaMarkdown { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "content": string; } interface OramaModal { @@ -130,6 +140,8 @@ export namespace Components { "suggestions"?: string[]; } interface OramaSearchBox { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "chatPlaceholder"?: string; "clientInstance"?: OramaClient; "colorScheme"?: ColorScheme; @@ -241,6 +253,10 @@ export interface OramaInputCustomEvent extends CustomEvent { detail: T; target: HTMLOramaInputElement; } +export interface OramaMarkdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLOramaMarkdownElement; +} export interface OramaModalCustomEvent extends CustomEvent { detail: T; target: HTMLOramaModalElement; @@ -294,6 +310,7 @@ declare global { interface HTMLOramaChatBoxElementEventMap { "answerGenerated": OnAnswerGeneratedCallbackProps; "answerSourceClick": OnAnswerSourceClickCallbackProps; + "chatMarkdownLinkClicked": OnChatMarkdownLinkClickedCallbackProps; } interface HTMLOramaChatBoxElement extends Components.OramaChatBox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLOramaChatBoxElement, ev: OramaChatBoxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -385,7 +402,18 @@ declare global { prototype: HTMLOramaLogoIconElement; new (): HTMLOramaLogoIconElement; }; + interface HTMLOramaMarkdownElementEventMap { + "chatMarkdownLinkClicked": OnChatMarkdownLinkClickedCallbackProps; + } interface HTMLOramaMarkdownElement extends Components.OramaMarkdown, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLOramaMarkdownElement, ev: OramaMarkdownCustomEvent) => 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: HTMLOramaMarkdownElement, ev: OramaMarkdownCustomEvent) => 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 HTMLOramaMarkdownElement: { prototype: HTMLOramaMarkdownElement; @@ -437,6 +465,7 @@ declare global { "searchResultClick": OnSearchResultClickCallbackProps; "answerGenerated": OnAnswerGeneratedCallbackProps; "answerSourceClick": OnAnswerSourceClickCallbackProps; + "chatMarkdownLinkClicked": OnChatMarkdownLinkClickedCallbackProps; } interface HTMLOramaSearchBoxElement extends Components.OramaSearchBox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLOramaSearchBoxElement, ev: OramaSearchBoxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -562,6 +591,8 @@ declare namespace LocalJSX { "withTooltip"?: string; } interface OramaChat { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "defaultTerm"?: string; "focusInput"?: boolean; "linksRel"?: string; @@ -575,10 +606,14 @@ declare namespace LocalJSX { "systemPrompts"?: string[]; } interface OramaChatAssistentMessage { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interaction"?: TChatInteraction; } interface OramaChatBox { "autoFocus"?: boolean; + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "clientInstance"?: OramaClient; "index"?: CloudIndexConfig; "linksRel"?: string; @@ -591,6 +626,10 @@ declare namespace LocalJSX { * Fired when user clicks on answer source */ "onAnswerSourceClick"?: (event: OramaChatBoxCustomEvent) => void; + /** + * Fired when user clicks on chat markdown link + */ + "onChatMarkdownLinkClicked"?: (event: OramaChatBoxCustomEvent) => void; "placeholder"?: string; "sourceBaseUrl"?: string; "sourcesMap"?: SourcesMap; @@ -604,6 +643,8 @@ declare namespace LocalJSX { "label"?: string; } interface OramaChatMessagesContainer { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interactions"?: TChatInteraction[]; "onAnswerGenerated"?: (event: OramaChatMessagesContainerCustomEvent) => void; } @@ -638,7 +679,10 @@ declare namespace LocalJSX { "size"?: number; } interface OramaMarkdown { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "content"?: string; + "onChatMarkdownLinkClicked"?: (event: OramaMarkdownCustomEvent) => void; } interface OramaModal { "closeOnEscape"?: boolean; @@ -666,6 +710,8 @@ declare namespace LocalJSX { "suggestions"?: string[]; } interface OramaSearchBox { + "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "chatPlaceholder"?: string; "clientInstance"?: OramaClient; "colorScheme"?: ColorScheme; @@ -685,6 +731,10 @@ declare namespace LocalJSX { * Fired when user clicks on answer source */ "onAnswerSourceClick"?: (event: OramaSearchBoxCustomEvent) => void; + /** + * Fired when user clicks on chat markdown link + */ + "onChatMarkdownLinkClicked"?: (event: OramaSearchBoxCustomEvent) => void; /** * Fired when search successfully resolves */ 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 d16e1db3..58aa423c 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 @@ -6,6 +6,7 @@ import '@phosphor-icons/webcomponents/dist/icons/PhThumbsDown.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhWarning.mjs' import { chatContext, TAnswerStatus } from '@/context/chatContext' import { copyToClipboard } from '@/utils/utils' +import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle } from '@/types' @Component({ tag: 'orama-chat-assistent-message', @@ -14,6 +15,9 @@ import { copyToClipboard } from '@/utils/utils' }) export class OramaChatAssistentMessage { @Prop() interaction: TChatInteraction + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @State() isCopied = false handleCopyToClipboard = () => { this.isCopied = true @@ -60,7 +64,15 @@ export class OramaChatAssistentMessage { linksTarget={chatContext.linksTarget} />
- {!this.interaction.response ? : } + {!this.interaction.response ? ( + + ) : ( + + )}
{this.interaction.latest && ( diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx index 6258c8a3..2270c6a1 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx @@ -1,8 +1,10 @@ import { SUPPORTED_HLJS_LANGUAGES_ARRAY } from '@/components/internal/SupportedHLJSLanguages' -import { Component, Element, Prop, Watch, h } from '@stencil/core' +import { Component, Element, type EventEmitter, Prop, Watch, h, Event } from '@stencil/core' import DOMPurify from 'dompurify' import hljs from 'highlight.js/lib/core' import { marked } from 'marked' +import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, OnChatMarkdownLinkClickedCallbackProps } from '@/types' + // biome-ignore lint/suspicious/noExplicitAny: Let me be, TypeScript ;(window as any).hljs = hljs @@ -27,53 +29,6 @@ const LANGUAGES_MAPPING: Record = { html: 'xml', } -marked.use({ - useNewRenderer: true, - renderer: { - code: (token) => { - const mappedLanguage = LANGUAGES_MAPPING[token.lang] || token.lang - // Some "languages" like HTML should be rendererd as XML. Reasons are still unclear. - const actualLanguage = SUPPORTED_HLJS_LANGUAGES[mappedLanguage] ? mappedLanguage : 'plaintext' - - const pre = document.createElement('pre') - pre.classList.add('orama-markdown-pre') - const codeTitle = document.createElement('div') - codeTitle.classList.add('orama-markdown-code-title') - pre.appendChild(codeTitle) - - const code = document.createElement('code') - code.classList.add('orama-markdown-code') - code.classList.add(`language-${actualLanguage}`) - code.classList.add('hljs') - - pre.appendChild(code) - - const hljsLanguage = hljs.getLanguage(actualLanguage) - if (hljsLanguage) { - if (actualLanguage === 'plaintext') { - codeTitle.innerHTML = '' - } else { - codeTitle.innerHTML = hljsLanguage.name - } - code.innerHTML = hljs.highlight(token.text, { language: actualLanguage, ignoreIllegals: true }).value - code.dataset.highlighted = 'yes' - } else { - codeTitle.innerHTML = ' ' - code.innerHTML = token.text - } - - return pre.outerHTML - }, - codespan: (token) => { - const code = document.createElement('code') - code.classList.add('orama-markdown-inline-code') - code.innerHTML = token.text - - return code.outerHTML - }, - }, -}) - /** * * @param language the language to load @@ -133,6 +88,12 @@ async function loadLanguageAndHighlight(language: string): Promise { }) export class OramaMarkdown { @Prop() content: string + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + + @Event({ bubbles: true, composed: true, cancelable: true }) + chatMarkdownLinkClicked: EventEmitter + divElement!: HTMLDivElement @Element() markdownElement!: HTMLElement @@ -142,6 +103,70 @@ export class OramaMarkdown { } componentDidLoad() { + marked.use({ + useNewRenderer: true, + renderer: { + link: (token) => { + const link = document.createElement('a') + link.innerHTML = this.chatMarkdownLinkTitle?.({ href: token.href, text: token.text }) ?? token.text + link.href = this.chatMarkdownLinkHref?.({ href: token.href, text: token.text }) ?? token.href + link.onclick = (onClickEvent) => { + const chatMarkdownLinkClicked = this.chatMarkdownLinkClicked.emit({ + text: token.text, + href: token.href, + }) + + if (chatMarkdownLinkClicked?.defaultPrevented) { + onClickEvent.preventDefault() + } + } + + return link.outerHTML + }, + code: (token) => { + const mappedLanguage = LANGUAGES_MAPPING[token.lang] || token.lang + // Some "languages" like HTML should be rendererd as XML. Reasons are still unclear. + const actualLanguage = SUPPORTED_HLJS_LANGUAGES[mappedLanguage] ? mappedLanguage : 'plaintext' + + const pre = document.createElement('pre') + pre.classList.add('orama-markdown-pre') + const codeTitle = document.createElement('div') + codeTitle.classList.add('orama-markdown-code-title') + pre.appendChild(codeTitle) + + const code = document.createElement('code') + code.classList.add('orama-markdown-code') + code.classList.add(`language-${actualLanguage}`) + code.classList.add('hljs') + + pre.appendChild(code) + + const hljsLanguage = hljs.getLanguage(actualLanguage) + if (hljsLanguage) { + if (actualLanguage === 'plaintext') { + codeTitle.innerHTML = '' + } else { + codeTitle.innerHTML = hljsLanguage.name + } + code.innerHTML = hljs.highlight(token.text, { language: actualLanguage, ignoreIllegals: true }).value + code.dataset.highlighted = 'yes' + } else { + codeTitle.innerHTML = ' ' + code.innerHTML = token.text + } + + return pre.outerHTML + }, + codespan: (token) => { + const code = document.createElement('code') + code.classList.add('orama-markdown-inline-code') + code.innerHTML = token.text + + return code.outerHTML + }, + }, + }) + this.parseMarkdown() } diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md index 79388adf..06d5df8a 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md @@ -7,9 +7,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------- | --------- | ----------- | -------- | ----------- | -| `content` | `content` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | --------- | ----------- | ------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `content` | `content` | | `string` | `undefined` | + + +## Events + +| Event | Description | Type | +| ------------------------- | ----------- | ---------------------------------------------- | +| `chatMarkdownLinkClicked` | | `CustomEvent<{ text: string; href: string; }>` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-sources/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-sources/readme.md index 14661922..c320aaaf 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-sources/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-sources/readme.md @@ -13,7 +13,7 @@ | `linksTarget` | `links-target` | | `string` | `'_blank'` | | `sourceBaseURL` | `source-base-u-r-l` | | `string` | `''` | | `sources` | `sources` | | `any` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `{ title: 'title', description: 'description', path: 'path', }` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `{ title: 'title', description: 'description', path: 'path', }` | ## Events 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 729b76ff..506976c9 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md @@ -7,9 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx index 95ef9911..e11e9902 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 @@ -1,6 +1,6 @@ import { Component, Host, Prop, h, Element, State, type EventEmitter, Event } from '@stencil/core' import { chatContext, type TChatInteraction } from '@/context/chatContext' -import type { OnSearchCompletedCallbackProps } from '@/types' +import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, OnSearchCompletedCallbackProps } from '@/types' @Component({ tag: 'orama-chat-messages-container', @@ -9,6 +9,8 @@ import type { OnSearchCompletedCallbackProps } from '@/types' }) export class OramaChatMessagesContainer { @Prop() interactions: TChatInteraction[] + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter @@ -55,7 +57,11 @@ export class OramaChatMessagesContainer { }} > - + {interaction.latest && interaction.status === 'done' && !!interaction.relatedQueries?.length && (
string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `interactions` | -- | | `TChatInteraction[]` | `undefined` | ## Events 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 ae654c97..f750cd00 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,6 +1,12 @@ import { Component, Fragment, Listen, Host, Prop, State, Watch, h, type EventEmitter, Event } from '@stencil/core' import { chatContext, chatStore, TAnswerStatus } from '@/context/chatContext' -import type { OnAnswerGeneratedCallbackProps, SearchResult, SourcesMap } from '@/types' +import type { + ChatMarkdownLinkHref, + ChatMarkdownLinkTitle, + OnAnswerGeneratedCallbackProps, + SearchResult, + SourcesMap, +} from '@/types' import '@phosphor-icons/webcomponents/dist/icons/PhPaperPlaneTilt.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhStopCircle.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhArrowDown.mjs' @@ -23,6 +29,9 @@ export class OramaChat { @Prop() suggestions?: string[] @Prop() systemPrompts?: string[] + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter @State() inputValue = '' @@ -284,7 +293,13 @@ export class OramaChat { ref={(ref) => (this.messagesContainerRef = ref)} >
(this.nonScrollableMessagesContainerRef = ref)}> - {hasInteractions ? : null} + {hasInteractions ? ( + + ) : null} {/* TODO: Provide a better animation */} {!hasInteractions ? ( diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index 87e73bbd..0b8e2d31 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -7,18 +7,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ----------------- | ----------- | ---------------------------------------------------------- | ------------------- | -| `defaultTerm` | `default-term` | | `string` | `undefined` | -| `focusInput` | `focus-input` | | `boolean` | `false` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | -| `showClearChat` | `show-clear-chat` | | `boolean` | `true` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `systemPrompts` | -- | | `string[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ----------------- | ----------- | ------------------------------------------------------------- | ------------------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `defaultTerm` | `default-term` | | `string` | `undefined` | +| `focusInput` | `focus-input` | | `boolean` | `false` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | +| `showClearChat` | `show-clear-chat` | | `boolean` | `true` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `systemPrompts` | -- | | `string[]` | `undefined` | ## Events diff --git a/packages/ui-stencil/src/components/internal/orama-footer/readme.md b/packages/ui-stencil/src/components/internal/orama-footer/readme.md index e65db6ba..d4011a49 100644 --- a/packages/ui-stencil/src/components/internal/orama-footer/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-footer/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | ------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `class` | `class` | | `string` | `undefined` | -| `colorScheme` | -- | | `{ readonly [x: number]: string; [Symbol.iterator]: () => IterableIterator; readonly length: number; toString: () => string; concat: (...strings: string[]) => string; slice: (start?: number, end?: number) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; includes: (searchString: string, position?: number) => boolean; at: (index: number) => string; big: () => string; link: (url: string) => string; small: () => string; sub: () => string; sup: () => string; replace: { (searchValue: string \| RegExp, replaceValue: string): string; (searchValue: string \| RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; normalize: { (form: "NFC" \| "NFD" \| "NFKC" \| "NFKD"): string; (form?: string): string; }; charAt: (pos: number) => string; charCodeAt: (index: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string \| string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }; match: { (regexp: string \| RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; search: { (regexp: string \| RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; split: { (separator: string \| RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: { (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; substr: (from: number, length?: number) => string; codePointAt: (pos: number) => number; endsWith: (searchString: string, endPosition?: number) => boolean; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; strike: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator; valueOf: () => string; }` | `'light'` | +| `colorScheme` | -- | | `{ readonly [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string \| string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }; match: { (regexp: string \| RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string \| RegExp, replaceValue: string): string; (searchValue: string \| RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string \| RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string \| RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: { (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: "NFC" \| "NFD" \| "NFKC" \| "NFKD"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator; at: (index: number) => string; }` | `'light'` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx index fa3ada51..dec7dc96 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx +++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx @@ -3,9 +3,12 @@ import { chatContext } from '@/context/chatContext' import { ChatService } from '@/services/ChatService' import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/utils/utils' import type { + ChatMarkdownLinkHref, + ChatMarkdownLinkTitle, CloudIndexConfig, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, + OnChatMarkdownLinkClickedCallbackProps, SourcesMap, } from '@/types' import type { OramaClient } from '@oramacloud/client' @@ -28,6 +31,8 @@ export class ChatBox { @Prop() suggestions?: string[] @Prop() autoFocus = true @Prop() systemPrompts?: string[] + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref @State() oramaClient: OramaClient @State() componentID = generateRandomID('chat-box') @@ -35,11 +40,17 @@ export class ChatBox { /** * Fired when answer generation is successfully completed */ - @Event() answerGenerated: EventEmitter + @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter /** * Fired when user clicks on answer source */ - @Event() answerSourceClick: EventEmitter + @Event({ bubbles: true, composed: true, cancelable: true }) + answerSourceClick: EventEmitter + /** + * Fired when user clicks on chat markdown link + */ + @Event({ bubbles: true, composed: true, cancelable: true }) + chatMarkdownLinkClicked: EventEmitter @Watch('index') indexChanged() { @@ -73,6 +84,8 @@ export class ChatBox { suggestions={this.suggestions} focusInput={this.autoFocus} systemPrompts={this.systemPrompts} + chatMarkdownLinkTitle={this.chatMarkdownLinkTitle} + chatMarkdownLinkHref={this.chatMarkdownLinkHref} >
diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index 63f92000..8e873853 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -7,26 +7,29 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ----------- | ---------------------------------------------------------- | ----------- | -| `autoFocus` | `auto-focus` | | `boolean` | `true` | -| `clientInstance` | -- | | `OramaClient` | `undefined` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `systemPrompts` | -- | | `string[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ----------------- | ----------- | ------------------------------------------------------------- | ----------- | +| `autoFocus` | `auto-focus` | | `boolean` | `true` | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `clientInstance` | -- | | `OramaClient` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `undefined` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `systemPrompts` | -- | | `string[]` | `undefined` | ## Events -| Event | Description | Type | -| ------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | -| `answerGenerated` | Fired when answer generation is successfully completed | `CustomEvent<{ askParams: AskParams; query: string; sources: Results; answer: string; segment: string; trigger: string; }>` | -| `answerSourceClick` | Fired when user clicks on answer source | `CustomEvent<{ source: SearchResult; }>` | +| Event | Description | Type | +| ------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | +| `answerGenerated` | Fired when answer generation is successfully completed | `CustomEvent<{ askParams: AskParams; query: string; sources: Results; answer: string; segment: string; trigger: string; }>` | +| `answerSourceClick` | Fired when user clicks on answer source | `CustomEvent<{ source: SearchResult; }>` | +| `chatMarkdownLinkClicked` | Fired when user clicks on chat markdown link | `CustomEvent<{ text: string; href: string; }>` | ## Dependencies diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx index 329cc471..56212929 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx @@ -10,10 +10,13 @@ import type { AnyOrama, Orama, SearchParams } from '@orama/orama' import type { HighlightOptions } from '@orama/highlight' import type { OramaClient } from '@oramacloud/client' import type { + ChatMarkdownLinkHref, + ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, + OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, @@ -51,6 +54,8 @@ export class SearchBox { @Prop() searchPlaceholder?: string @Prop() suggestions?: string[] @Prop() searchParams?: SearchParams> + @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref @State() oramaClient: OramaClient @State() componentID = generateRandomID('search-box') @@ -60,19 +65,26 @@ export class SearchBox { /** * Fired when search successfully resolves */ - @Event() searchCompleted: EventEmitter + @Event({ bubbles: true, composed: true }) searchCompleted: EventEmitter /** * Fired when user clicks on search result */ - @Event() searchResultClick: EventEmitter + @Event({ bubbles: true, composed: true, cancelable: true }) + searchResultClick: EventEmitter /** * Fired when answer generation is successfully completed */ - @Event() answerGenerated: EventEmitter + @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter /** * Fired when user clicks on answer source */ - @Event() answerSourceClick: EventEmitter + @Event({ bubbles: true, composed: true, cancelable: true }) + answerSourceClick: EventEmitter + /** + * Fired when user clicks on chat markdown link + */ + @Event({ bubbles: true, composed: true, cancelable: true }) + chatMarkdownLinkClicked: EventEmitter wrapperRef!: HTMLElement @@ -248,6 +260,8 @@ export class SearchBox { linksRel={this.linksRel} sourcesMap={this.sourcesMap} suggestions={this.suggestions} + chatMarkdownLinkTitle={this.chatMarkdownLinkTitle} + chatMarkdownLinkHref={this.chatMarkdownLinkHref} /> ) diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index 1b8246a1..b59e5c23 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,38 +5,41 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `chatPlaceholder` | `chat-placeholder` | | `string` | `undefined` | -| `clientInstance` | -- | | `OramaClient` | `undefined` | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `disableChat` | `disable-chat` | | `boolean` | `false` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `highlightDescription` | `highlight-description` | | `HighlightOptions \| boolean` | `false` | -| `highlightTitle` | `highlight-title` | | `HighlightOptions \| boolean` | `false` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `layout` | `layout` | | `"embed" \| "modal"` | `'modal'` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `resultMap` | -- | | `{ section?: string \| ResultMapRenderFunction; title?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; }` | `{}` | -| `searchParams` | -- | | `SearchParamsFullText>, never> \| SearchParamsHybrid>, never> \| SearchParamsVector>, never>` | `undefined` | -| `searchPlaceholder` | `search-placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatPlaceholder` | `chat-placeholder` | | `string` | `undefined` | +| `clientInstance` | -- | | `OramaClient` | `undefined` | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `disableChat` | `disable-chat` | | `boolean` | `false` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `highlightDescription` | `highlight-description` | | `HighlightOptions \| boolean` | `false` | +| `highlightTitle` | `highlight-title` | | `HighlightOptions \| boolean` | `false` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `layout` | `layout` | | `"embed" \| "modal"` | `'modal'` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `placeholder` | `placeholder` | | `string` | `undefined` | +| `resultMap` | -- | | `{ title?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; section?: string \| ResultMapRenderFunction; }` | `{}` | +| `searchParams` | -- | | `SearchParamsFullText>, never> \| SearchParamsHybrid>, never> \| SearchParamsVector>, never>` | `undefined` | +| `searchPlaceholder` | `search-placeholder` | | `string` | `undefined` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | ## Events -| Event | Description | Type | -| ------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `answerGenerated` | Fired when answer generation is successfully completed | `CustomEvent<{ askParams: AskParams; query: string; sources: Results; answer: string; segment: string; trigger: string; }>` | -| `answerSourceClick` | Fired when user clicks on answer source | `CustomEvent<{ source: SearchResult; }>` | -| `searchCompleted` | Fired when search successfully resolves | `CustomEvent<{ clientSearchParams: ClientSearchParams; result: { results: SearchResultBySection[]; resultsCount: number; facets: Facet[]; }; }>` | -| `searchResultClick` | Fired when user clicks on search result | `CustomEvent<{ result: SearchResult; }>` | +| Event | Description | Type | +| ------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| `answerGenerated` | Fired when answer generation is successfully completed | `CustomEvent<{ askParams: AskParams; query: string; sources: Results; answer: string; segment: string; trigger: string; }>` | +| `answerSourceClick` | Fired when user clicks on answer source | `CustomEvent<{ source: SearchResult; }>` | +| `chatMarkdownLinkClicked` | Fired when user clicks on chat markdown link | `CustomEvent<{ text: string; href: string; }>` | +| `searchCompleted` | Fired when search successfully resolves | `CustomEvent<{ clientSearchParams: ClientSearchParams; result: { results: SearchResultBySection[]; resultsCount: number; facets: Facet[]; }; }>` | +| `searchResultClick` | Fired when user clicks on search result | `CustomEvent<{ result: SearchResult; }>` | ## Dependencies diff --git a/packages/ui-stencil/src/types/index.ts b/packages/ui-stencil/src/types/index.ts index c6242075..d79ef05f 100644 --- a/packages/ui-stencil/src/types/index.ts +++ b/packages/ui-stencil/src/types/index.ts @@ -41,6 +41,10 @@ export type AskParams = SearchParams & { } } +export type ChatMarkdownLinkTitle = ({ text, href }: { text: string; href: string }) => string +export type ChatMarkdownLinkHref = ({ text, href }: { text: string; href: string }) => string +export type OnChatMarkdownLinkClickedCallbackProps = { text: string; href: string } + export type OnSearchCompletedCallbackProps = { clientSearchParams: ClientSearchParams result: { results: SearchResultBySection[]; resultsCount: number; facets: Facet[] } diff --git a/scripts/release.mjs b/scripts/release.mjs index 26eb0702..23258241 100644 --- a/scripts/release.mjs +++ b/scripts/release.mjs @@ -1,56 +1,60 @@ -import { spawn } from 'node:child_process' -import { resolve, relative } from 'node:path' +import { spawn } from "node:child_process"; +import { resolve, relative } from "node:path"; -const rootDir = process.cwd() +const rootDir = process.cwd(); const packages = [ - 'ui-stencil', - 'ui-stencil-react', - 'ui-stencil-angular', - 'ui-stencil-vue', -] + "ui-stencil", + "ui-stencil-react", + "ui-stencil-angular", + "ui-stencil-vue", +]; function step(message) { - console.log(`\x1b[1m\x1b[32m--- ${message}\x1b[0m`) + console.log(`\x1b[1m\x1b[32m--- ${message}\x1b[0m`); } async function execute(command, args, cwd) { - if (!Array.isArray(args)) { - args = [args] - } + const normalizedArgs = !Array.isArray(args) ? [args] : argss; - let success, fail + let success; + let fail; const promise = new Promise((resolve, reject) => { - success = resolve - fail = reject - }) + success = resolve; + fail = reject; + }); if (cwd) { - step(`Executing: ${command} ${args.join(' ')} (from folder ${relative(rootDir, cwd)}) ...`) + step( + `Executing: ${command} ${normalizedArgs.join(" ")} (from folder ${relative(rootDir, cwd)}) ...` + ); } else { - step(`Executing: ${command} ${args.join(' ')} ...`) + step(`Executing: ${command} ${normalizedArgs.join(" ")} ...`); } - const childProcess = spawn(command, args, { cwd, stdio: 'inherit' }) + const childProcess = spawn(command, normalizedArgs, { + cwd, + stdio: "inherit", + }); - childProcess.on('close', code => { + childProcess.on("close", (code) => { if (code !== 0) { - fail(new Error(`Process failed with status code ${code}.`)) + fail(new Error(`Process failed with status code ${code}.`)); } - success() - }) + success(); + }); - return promise + return promise; } async function main() { - await execute('pnpm', 'build') + await execute("pnpm", "build"); for (const pkg of packages) { - const cwd = resolve(rootDir, 'packages', pkg) - await execute('pnpm', ['publish'], cwd) + const cwd = resolve(rootDir, "packages", pkg); + await execute("pnpm", ["publish"], cwd); } } -await main() \ No newline at end of file +await main(); From d78268ab42b9570f69faf3b382e88eaecda1ad58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Mon, 25 Nov 2024 01:11:33 -0300 Subject: [PATCH 2/2] feat: add target ccallback for markdown links --- packages/ui-stencil-vue/lib/components.ts | 8 ++- packages/ui-stencil/src/components.d.ts | 16 +++++- .../orama-chat-assistent-message.tsx | 3 +- .../orama-markdown/orama-markdown.tsx | 13 ++++- .../orama-markdown/readme.md | 11 +++-- .../orama-chat-assistent-message/readme.md | 11 +++-- .../orama-chat-messages-container.tsx | 8 ++- .../orama-chat-messages-container/readme.md | 11 +++-- .../internal/orama-chat/orama-chat.tsx | 2 + .../components/internal/orama-chat/readme.md | 29 +++++------ .../orama-chat-box/orama-chat-box.tsx | 2 + .../src/components/orama-chat-box/readme.md | 29 +++++------ .../orama-search-box/orama-search-box.tsx | 2 + .../src/components/orama-search-box/readme.md | 49 ++++++++++--------- packages/ui-stencil/src/types/index.ts | 1 + 15 files changed, 122 insertions(+), 73 deletions(-) diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 2e1ede59..d668f661 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -32,6 +32,7 @@ export const OramaChat = /*@__PURE__*/ defineContainer('orama-cha 'systemPrompts', 'chatMarkdownLinkTitle', 'chatMarkdownLinkHref', + 'chatMarkdownLinkTarget', 'answerGenerated' ]); @@ -39,7 +40,8 @@ export const OramaChat = /*@__PURE__*/ defineContainer('orama-cha export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer('orama-chat-assistent-message', undefined, [ 'interaction', 'chatMarkdownLinkTitle', - 'chatMarkdownLinkHref' + 'chatMarkdownLinkHref', + 'chatMarkdownLinkTarget' ]); @@ -56,6 +58,7 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer('ora 'systemPrompts', 'chatMarkdownLinkTitle', 'chatMarkdownLinkHref', + 'chatMarkdownLinkTarget', 'answerGenerated', 'answerSourceClick', 'chatMarkdownLinkClicked' @@ -74,6 +77,7 @@ export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer('o 'content', 'chatMarkdownLinkTitle', 'chatMarkdownLinkHref', + 'chatMarkdownLinkTarget', 'chatMarkdownLinkClicked' ]); @@ -182,6 +187,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( 'searchParams', 'chatMarkdownLinkTitle', 'chatMarkdownLinkHref', + 'chatMarkdownLinkTarget', 'searchCompleted', 'searchResultClick', 'answerGenerated', diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index bbeb1571..ef44d79a 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -6,7 +6,7 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { ButtonProps } from "./components/internal/orama-button/orama-button"; -import { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +import { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; import { TChatInteraction } from "./context/chatContext"; import { OramaClient } from "@oramacloud/client"; import { InputProps } from "./components/internal/orama-input/orama-input"; @@ -18,7 +18,7 @@ import { TThemeOverrides as TThemeOverrides1 } from "./components.d"; import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; import { TextProps } from "./components/internal/orama-text/orama-text"; export { ButtonProps } from "./components/internal/orama-button/orama-button"; -export { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; +export { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index"; export { TChatInteraction } from "./context/chatContext"; export { OramaClient } from "@oramacloud/client"; export { InputProps } from "./components/internal/orama-input/orama-input"; @@ -41,6 +41,7 @@ export namespace Components { } interface OramaChat { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "defaultTerm"?: string; "focusInput"?: boolean; @@ -55,12 +56,14 @@ export namespace Components { } interface OramaChatAssistentMessage { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interaction": TChatInteraction; } interface OramaChatBox { "autoFocus": boolean; "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "clientInstance"?: OramaClient; "index"?: CloudIndexConfig; @@ -80,6 +83,7 @@ export namespace Components { } interface OramaChatMessagesContainer { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interactions": TChatInteraction[]; } @@ -114,6 +118,7 @@ export namespace Components { } interface OramaMarkdown { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "content": string; } @@ -141,6 +146,7 @@ export namespace Components { } interface OramaSearchBox { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "chatPlaceholder"?: string; "clientInstance"?: OramaClient; @@ -592,6 +598,7 @@ declare namespace LocalJSX { } interface OramaChat { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "defaultTerm"?: string; "focusInput"?: boolean; @@ -607,12 +614,14 @@ declare namespace LocalJSX { } interface OramaChatAssistentMessage { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interaction"?: TChatInteraction; } interface OramaChatBox { "autoFocus"?: boolean; "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "clientInstance"?: OramaClient; "index"?: CloudIndexConfig; @@ -644,6 +653,7 @@ declare namespace LocalJSX { } interface OramaChatMessagesContainer { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "interactions"?: TChatInteraction[]; "onAnswerGenerated"?: (event: OramaChatMessagesContainerCustomEvent) => void; @@ -680,6 +690,7 @@ declare namespace LocalJSX { } interface OramaMarkdown { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "content"?: string; "onChatMarkdownLinkClicked"?: (event: OramaMarkdownCustomEvent) => void; @@ -711,6 +722,7 @@ declare namespace LocalJSX { } interface OramaSearchBox { "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; "chatPlaceholder"?: string; "clientInstance"?: OramaClient; 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 58aa423c..0d282ff0 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 @@ -6,7 +6,7 @@ import '@phosphor-icons/webcomponents/dist/icons/PhThumbsDown.mjs' import '@phosphor-icons/webcomponents/dist/icons/PhWarning.mjs' import { chatContext, TAnswerStatus } from '@/context/chatContext' import { copyToClipboard } from '@/utils/utils' -import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle } from '@/types' +import type { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle } from '@/types' @Component({ tag: 'orama-chat-assistent-message', @@ -17,6 +17,7 @@ export class OramaChatAssistentMessage { @Prop() interaction: TChatInteraction @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @State() isCopied = false handleCopyToClipboard = () => { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx index 2270c6a1..7dd7214d 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx @@ -3,7 +3,12 @@ import { Component, Element, type EventEmitter, Prop, Watch, h, Event } from '@s import DOMPurify from 'dompurify' import hljs from 'highlight.js/lib/core' import { marked } from 'marked' -import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, OnChatMarkdownLinkClickedCallbackProps } from '@/types' +import type { + ChatMarkdownLinkHref, + ChatMarkdownLinkTarget, + ChatMarkdownLinkTitle, + OnChatMarkdownLinkClickedCallbackProps, +} from '@/types' // biome-ignore lint/suspicious/noExplicitAny: Let me be, TypeScript ;(window as any).hljs = hljs @@ -90,6 +95,7 @@ export class OramaMarkdown { @Prop() content: string @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @Event({ bubbles: true, composed: true, cancelable: true }) chatMarkdownLinkClicked: EventEmitter @@ -110,6 +116,11 @@ export class OramaMarkdown { const link = document.createElement('a') link.innerHTML = this.chatMarkdownLinkTitle?.({ href: token.href, text: token.text }) ?? token.text link.href = this.chatMarkdownLinkHref?.({ href: token.href, text: token.text }) ?? token.href + + if (this.chatMarkdownLinkHref) { + link.target = this.chatMarkdownLinkHref?.({ href: token.href, text: token.text }) + } + link.onclick = (onClickEvent) => { const chatMarkdownLinkClicked = this.chatMarkdownLinkClicked.emit({ text: token.text, diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md index 06d5df8a..f3d7589b 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | --------- | ----------- | ------------------------------------------------------------- | ----------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `content` | `content` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------- | ----------- | ------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `content` | `content` | | `string` | `undefined` | ## Events 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 506976c9..40f4c7c1 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `interaction` | -- | | `{ query: string; response?: string; sources?: any; latest?: boolean; status: TAnswerStatus; interactionId?: string; relatedQueries?: string[]; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx index e11e9902..a249ef2c 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 @@ -1,6 +1,11 @@ import { Component, Host, Prop, h, Element, State, type EventEmitter, Event } from '@stencil/core' import { chatContext, type TChatInteraction } from '@/context/chatContext' -import type { ChatMarkdownLinkHref, ChatMarkdownLinkTitle, OnSearchCompletedCallbackProps } from '@/types' +import type { + ChatMarkdownLinkHref, + ChatMarkdownLinkTarget, + ChatMarkdownLinkTitle, + OnSearchCompletedCallbackProps, +} from '@/types' @Component({ tag: 'orama-chat-messages-container', @@ -11,6 +16,7 @@ export class OramaChatMessagesContainer { @Prop() interactions: TChatInteraction[] @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter 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 index e59fa5b0..362aaae9 100644 --- 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 @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | --------- | ----------- | ------------------------------------------------------------- | ----------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `interactions` | -- | | `TChatInteraction[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------- | ----------- | ------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `interactions` | -- | | `TChatInteraction[]` | `undefined` | ## Events 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 f750cd00..f11a5572 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 @@ -2,6 +2,7 @@ import { Component, Fragment, Listen, Host, Prop, State, Watch, h, type EventEmi import { chatContext, chatStore, TAnswerStatus } from '@/context/chatContext' import type { ChatMarkdownLinkHref, + ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, OnAnswerGeneratedCallbackProps, SearchResult, @@ -31,6 +32,7 @@ export class OramaChat { @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index 0b8e2d31..6fadf5ed 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -7,20 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ----------------- | ----------- | ------------------------------------------------------------- | ------------------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `defaultTerm` | `default-term` | | `string` | `undefined` | -| `focusInput` | `focus-input` | | `boolean` | `false` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | -| `showClearChat` | `show-clear-chat` | | `boolean` | `true` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `systemPrompts` | -- | | `string[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ----------------- | ----------- | ------------------------------------------------------------- | ------------------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `defaultTerm` | `default-term` | | `string` | `undefined` | +| `focusInput` | `focus-input` | | `boolean` | `false` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | +| `showClearChat` | `show-clear-chat` | | `boolean` | `true` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `''` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `systemPrompts` | -- | | `string[]` | `undefined` | ## Events diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx index dec7dc96..13bd8144 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx +++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx @@ -4,6 +4,7 @@ import { ChatService } from '@/services/ChatService' import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/utils/utils' import type { ChatMarkdownLinkHref, + ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, OnAnswerGeneratedCallbackProps, @@ -33,6 +34,7 @@ export class ChatBox { @Prop() systemPrompts?: string[] @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @State() oramaClient: OramaClient @State() componentID = generateRandomID('chat-box') diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index 8e873853..ab1d938d 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -7,20 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ----------------- | ----------- | ------------------------------------------------------------- | ----------- | -| `autoFocus` | `auto-focus` | | `boolean` | `true` | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `clientInstance` | -- | | `OramaClient` | `undefined` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `systemPrompts` | -- | | `string[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ----------------- | ----------- | ------------------------------------------------------------- | ----------- | +| `autoFocus` | `auto-focus` | | `boolean` | `true` | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `clientInstance` | -- | | `OramaClient` | `undefined` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `undefined` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `systemPrompts` | -- | | `string[]` | `undefined` | ## Events diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx index 56212929..9582daf4 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx @@ -11,6 +11,7 @@ import type { HighlightOptions } from '@orama/highlight' import type { OramaClient } from '@oramacloud/client' import type { ChatMarkdownLinkHref, + ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, @@ -56,6 +57,7 @@ export class SearchBox { @Prop() searchParams?: SearchParams> @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @State() oramaClient: OramaClient @State() componentID = generateRandomID('search-box') diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index b59e5c23..ff6b020d 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,30 +5,31 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatPlaceholder` | `chat-placeholder` | | `string` | `undefined` | -| `clientInstance` | -- | | `OramaClient` | `undefined` | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `disableChat` | `disable-chat` | | `boolean` | `false` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `highlightDescription` | `highlight-description` | | `HighlightOptions \| boolean` | `false` | -| `highlightTitle` | `highlight-title` | | `HighlightOptions \| boolean` | `false` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `layout` | `layout` | | `"embed" \| "modal"` | `'modal'` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `resultMap` | -- | | `{ title?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; section?: string \| ResultMapRenderFunction; }` | `{}` | -| `searchParams` | -- | | `SearchParamsFullText>, never> \| SearchParamsHybrid>, never> \| SearchParamsVector>, never>` | `undefined` | -| `searchPlaceholder` | `search-placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | +| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatPlaceholder` | `chat-placeholder` | | `string` | `undefined` | +| `clientInstance` | -- | | `OramaClient` | `undefined` | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `disableChat` | `disable-chat` | | `boolean` | `false` | +| `facetProperty` | `facet-property` | | `string` | `undefined` | +| `highlightDescription` | `highlight-description` | | `HighlightOptions \| boolean` | `false` | +| `highlightTitle` | `highlight-title` | | `HighlightOptions \| boolean` | `false` | +| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | +| `layout` | `layout` | | `"embed" \| "modal"` | `'modal'` | +| `linksRel` | `links-rel` | | `string` | `undefined` | +| `linksTarget` | `links-target` | | `string` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `placeholder` | `placeholder` | | `string` | `undefined` | +| `resultMap` | -- | | `{ title?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; section?: string \| ResultMapRenderFunction; }` | `{}` | +| `searchParams` | -- | | `SearchParamsFullText \| AnyOrama>, never> \| SearchParamsHybrid \| AnyOrama>, never> \| SearchParamsVector \| AnyOrama>, never>` | `undefined` | +| `searchPlaceholder` | `search-placeholder` | | `string` | `undefined` | +| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `suggestions` | -- | | `string[]` | `undefined` | +| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | ## Events diff --git a/packages/ui-stencil/src/types/index.ts b/packages/ui-stencil/src/types/index.ts index d79ef05f..138a3965 100644 --- a/packages/ui-stencil/src/types/index.ts +++ b/packages/ui-stencil/src/types/index.ts @@ -43,6 +43,7 @@ export type AskParams = SearchParams & { export type ChatMarkdownLinkTitle = ({ text, href }: { text: string; href: string }) => string export type ChatMarkdownLinkHref = ({ text, href }: { text: string; href: string }) => string +export type ChatMarkdownLinkTarget = ({ text, href }: { text: string; href: string }) => string export type OnChatMarkdownLinkClickedCallbackProps = { text: string; href: string } export type OnSearchCompletedCallbackProps = {