feat: add on message completed event callback

oramasearch · Nov 21, 2024 · bd907e1 · bd907e1
1 parent 45b23f9
commit bd907e1
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 38 deletions.
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -30,6 +30,7 @@ function App() {
                 }}
                 style={{ height: '600px' }}
                 onAnswerSourceClick={(e) => console.log(e)}
+                onAnswerGenerated={(e) => console.log(e)}
               />
             </div>
           </section>

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -30,7 +30,7 @@ export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-cha
   'focusInput',
   'suggestions',
   'systemPrompts',
-  'answerGeneratedCallback'
+  'answerGenerated'
 ]);
 
 
@@ -50,6 +50,7 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
   'suggestions',
   'autoFocus',
   'systemPrompts',
+  'answerGenerated',
   'answerSourceClick'
 ]);
 
@@ -168,7 +169,9 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'suggestions',
   'searchParams',
   'searchCompletedCallback',
-  'searchResultClick'
+  'searchResultClick',
+  'answerGenerated',
+  'answerSourceClick'
 ]);
 
 

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 { CloudIndexConfig, ColorScheme, Facet, OnAnswerSourceClickCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
+import { CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, 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, OnAnswerSourceClickCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
+export { CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, 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";
@@ -269,7 +269,7 @@ declare global {
         new (): HTMLOramaButtonElement;
     };
     interface HTMLOramaChatElementEventMap {
-        "answerGeneratedCallback": OnSearchCompletedCallbackProps;
+        "answerGenerated": OnAnswerGeneratedCallbackProps;
     }
     interface HTMLOramaChatElement extends Components.OramaChat, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaChatElementEventMap>(type: K, listener: (this: HTMLOramaChatElement, ev: OramaChatCustomEvent<HTMLOramaChatElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -292,6 +292,7 @@ declare global {
         new (): HTMLOramaChatAssistentMessageElement;
     };
     interface HTMLOramaChatBoxElementEventMap {
+        "answerGenerated": OnAnswerGeneratedCallbackProps;
         "answerSourceClick": OnAnswerSourceClickCallbackProps;
     }
     interface HTMLOramaChatBoxElement extends Components.OramaChatBox, HTMLStencilElement {
@@ -434,6 +435,8 @@ declare global {
     interface HTMLOramaSearchBoxElementEventMap {
         "searchCompletedCallback": OnSearchCompletedCallbackProps;
         "searchResultClick": OnSearchResultClickCallbackProps;
+        "answerGenerated": OnAnswerGeneratedCallbackProps;
+        "answerSourceClick": OnAnswerSourceClickCallbackProps;
     }
     interface HTMLOramaSearchBoxElement extends Components.OramaSearchBox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaSearchBoxElementEventMap>(type: K, listener: (this: HTMLOramaSearchBoxElement, ev: OramaSearchBoxCustomEvent<HTMLOramaSearchBoxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -563,7 +566,7 @@ declare namespace LocalJSX {
         "focusInput"?: boolean;
         "linksRel"?: string;
         "linksTarget"?: string;
-        "onAnswerGeneratedCallback"?: (event: OramaChatCustomEvent<OnSearchCompletedCallbackProps>) => void;
+        "onAnswerGenerated"?: (event: OramaChatCustomEvent<OnAnswerGeneratedCallbackProps>) => void;
         "placeholder"?: string;
         "showClearChat"?: boolean;
         "sourceBaseUrl"?: string;
@@ -580,6 +583,10 @@ declare namespace LocalJSX {
         "index"?: CloudIndexConfig;
         "linksRel"?: string;
         "linksTarget"?: string;
+        /**
+          * Fired when answer generation is successfully completed
+         */
+        "onAnswerGenerated"?: (event: OramaChatBoxCustomEvent<OnAnswerGeneratedCallbackProps>) => void;
         /**
           * Fired when user clicks on answer source
          */
@@ -670,6 +677,14 @@ declare namespace LocalJSX {
         "layout"?: 'modal' | 'embed';
         "linksRel"?: string;
         "linksTarget"?: string;
+        /**
+          * Fired when answer generation is successfully completed
+         */
+        "onAnswerGenerated"?: (event: OramaSearchBoxCustomEvent<OnAnswerGeneratedCallbackProps>) => void;
+        /**
+          * Fired when user clicks on answer source
+         */
+        "onAnswerSourceClick"?: (event: OramaSearchBoxCustomEvent<OnAnswerSourceClickCallbackProps>) => void;
         /**
           * Fired when search successfully resolves
          */

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
@@ -1,6 +1,6 @@
 import { Component, Fragment, Listen, Host, Prop, State, Watch, h, type EventEmitter, Event } from '@stencil/core'
 import { chatContext, chatStore, TAnswerStatus } from '@/context/chatContext'
-import type { OnSearchCompletedCallbackProps, SearchResult, SourcesMap } from '@/types'
+import type { OnAnswerGeneratedCallbackProps, OnSearchCompletedCallbackProps, 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,17 +23,11 @@ export class OramaChat {
   @Prop() suggestions?: string[]
   @Prop() systemPrompts?: string[]
 
-  @Event({ bubbles: true, composed: true }) answerGeneratedCallback: EventEmitter<OnSearchCompletedCallbackProps>
+  @Event({ bubbles: true, composed: true }) answerGenerated: EventEmitter<OnAnswerGeneratedCallbackProps>
 
   @State() inputValue = ''
   @State() showGoToBottomButton = false
 
-  private answerGenerationCallbacks = {
-    onAnswerGeneratedCallback(onAnswerGeneratedCallbackProps) {
-      this.answerGeneratedCallback.emit(onAnswerGeneratedCallbackProps)
-    },
-  }
-
   @Listen('sourceItemClick')
   handleSourceItemClick(event: CustomEvent<SearchResult>) {
     // console.log(`Source item clicked: ${event.detail.title}`, event.detail)
@@ -42,7 +36,9 @@ export class OramaChat {
   @Watch('defaultTerm')
   handleDefaultTermChange() {
     if (this.defaultTerm) {
-      chatContext.chatService?.sendQuestion(this.defaultTerm, this.systemPrompts, this.answerGenerationCallbacks)
+      chatContext.chatService?.sendQuestion(this.defaultTerm, this.systemPrompts, {
+        onAnswerGeneratedCallback: (params) => this.answerGenerated.emit(params),
+      })
     }
   }
 
@@ -237,7 +233,9 @@ export class OramaChat {
       throw new Error('Chat Service is not initialized')
     }
 
-    chatContext.chatService.sendQuestion(this.inputValue, this.systemPrompts, this.answerGenerationCallbacks)
+    chatContext.chatService.sendQuestion(this.inputValue, this.systemPrompts, {
+      onAnswerGeneratedCallback: (params) => this.answerGenerated.emit(params),
+    })
     this.inputValue = ''
   }
 
@@ -250,7 +248,9 @@ export class OramaChat {
       throw new Error('Chat Service is not initialized')
     }
 
-    chatContext.chatService.sendQuestion(suggestion, undefined, this.answerGenerationCallbacks)
+    chatContext.chatService.sendQuestion(suggestion, undefined, {
+      onAnswerGeneratedCallback: (params) => this.answerGenerated.emit(params),
+    })
     this.inputValue = ''
   }
 

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md
@@ -23,9 +23,9 @@
 
 ## Events
 
-| Event                     | Description | Type                                                                                                                                             |
-| ------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `answerGeneratedCallback` |             | `CustomEvent<{ clientSearchParams: ClientSearchParams; result: { results: SearchResultBySection[]; resultsCount: number; facets: Facet[]; }; }>` |
+| Event             | Description | Type                                                                                                                                 |
+| ----------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `answerGenerated` |             | `CustomEvent<{ askParams: AskParams; query: string; sources: Results<unknown>; answer: string; segment: string; trigger: string; }>` |
 
 
 ## 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
@@ -2,7 +2,12 @@ import { Component, Host, h, Prop, Watch, State, Element, type EventEmitter, Eve
 import { chatContext } from '@/context/chatContext'
 import { ChatService } from '@/services/ChatService'
 import { generateRandomID, initOramaClient, validateCloudIndexConfig } from '@/utils/utils'
-import type { CloudIndexConfig, OnAnswerSourceClickCallbackProps, SearchResult, SourcesMap } from '@/types'
+import type {
+  CloudIndexConfig,
+  OnAnswerGeneratedCallbackProps,
+  OnAnswerSourceClickCallbackProps,
+  SourcesMap,
+} from '@/types'
 import type { OramaClient } from '@oramacloud/client'
 import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
 
@@ -27,6 +32,10 @@ export class ChatBox {
   @State() oramaClient: OramaClient
   @State() componentID = generateRandomID('chat-box')
 
+  /**
+   * Fired when answer generation is successfully completed
+   */
+  @Event() answerGenerated: EventEmitter<OnAnswerGeneratedCallbackProps>
   /**
    * Fired when user clicks on answer source
    */

diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md
@@ -23,9 +23,10 @@
 
 ## Events
 
-| Event               | Description                             | Type                                     |
-| ------------------- | --------------------------------------- | ---------------------------------------- |
-| `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<unknown>; answer: string; segment: string; trigger: string; }>` |
+| `answerSourceClick` | Fired when user clicks on answer source                | `CustomEvent<{ source: SearchResult; }>`                                                                                             |
 
 
 ## 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
@@ -12,6 +12,8 @@ import type { OramaClient } from '@oramacloud/client'
 import type {
   CloudIndexConfig,
   ColorScheme,
+  OnAnswerGeneratedCallbackProps,
+  OnAnswerSourceClickCallbackProps,
   OnSearchCompletedCallbackProps,
   OnSearchResultClickCallbackProps,
   ResultMap,
@@ -64,6 +66,14 @@ export class SearchBox {
    * Fired when user clicks on search result
    */
   @Event() searchResultClick: EventEmitter<OnSearchResultClickCallbackProps>
+  /**
+   * Fired when answer generation is successfully completed
+   */
+  @Event() answerGenerated: EventEmitter<OnAnswerGeneratedCallbackProps>
+  /**
+   * Fired when user clicks on answer source
+   */
+  @Event() answerSourceClick: EventEmitter<OnAnswerSourceClickCallbackProps>
 
   wrapperRef!: HTMLElement