feat: add target ccallback for markdown links

oramasearch · Nov 25, 2024 · d78268a · d78268a
1 parent 359a9ba
commit d78268a
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 73 deletions.
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -32,14 +32,16 @@ export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-cha
   'systemPrompts',
   'chatMarkdownLinkTitle',
   'chatMarkdownLinkHref',
+  'chatMarkdownLinkTarget',
   'answerGenerated'
 ]);
 
 
 export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatAssistentMessage>('orama-chat-assistent-message', undefined, [
   'interaction',
   'chatMarkdownLinkTitle',
-  'chatMarkdownLinkHref'
+  'chatMarkdownLinkHref',
+  'chatMarkdownLinkTarget'
 ]);
 
 
@@ -56,6 +58,7 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
   'systemPrompts',
   'chatMarkdownLinkTitle',
   'chatMarkdownLinkHref',
+  'chatMarkdownLinkTarget',
   'answerGenerated',
   'answerSourceClick',
   'chatMarkdownLinkClicked'
@@ -74,6 +77,7 @@ export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer<JSX.Oram
   'interactions',
   'chatMarkdownLinkTitle',
   'chatMarkdownLinkHref',
+  'chatMarkdownLinkTarget',
   'answerGenerated'
 ]);
 
@@ -124,6 +128,7 @@ export const OramaMarkdown = /*@__PURE__*/ defineContainer<JSX.OramaMarkdown>('o
   'content',
   'chatMarkdownLinkTitle',
   'chatMarkdownLinkHref',
+  'chatMarkdownLinkTarget',
   'chatMarkdownLinkClicked'
 ]);
 
@@ -182,6 +187,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   '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
@@ -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<OnSearchCompletedCallbackProps>) => void;
@@ -680,6 +690,7 @@ declare namespace LocalJSX {
     }
     interface OramaMarkdown {
         "chatMarkdownLinkHref"?: ChatMarkdownLinkHref;
+        "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "content"?: string;
         "onChatMarkdownLinkClicked"?: (event: OramaMarkdownCustomEvent<OnChatMarkdownLinkClickedCallbackProps>) => void;
@@ -711,6 +722,7 @@ declare namespace LocalJSX {
     }
     interface OramaSearchBox {
         "chatMarkdownLinkHref"?: ChatMarkdownLinkHref;
+        "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget;
         "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle;
         "chatPlaceholder"?: string;
         "clientInstance"?: OramaClient;

diff --git a/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/...ama-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/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/...ma-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<OnChatMarkdownLinkClickedCallbackProps>
@@ -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/...a-chat-messages-container/orama-chat-assistent-message/orama-markdown/readme.md b/...a-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/...s/internal/orama-chat-messages-container/orama-chat-assistent-message/readme.md b/...s/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/...l/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/...l/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<OnSearchCompletedCallbackProps>
 

diff --git a/...ages/ui-stencil/src/components/internal/orama-chat-messages-container/readme.md b/...ages/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
@@ -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<OnAnswerGeneratedCallbackProps>