diff --git a/packages/chat-component/src/config/global-config.js b/packages/chat-component/src/config/global-config.js index f27da3cb..7e6b7f99 100644 --- a/packages/chat-component/src/config/global-config.js +++ b/packages/chat-component/src/config/global-config.js @@ -10,7 +10,8 @@ const globalConfig = { 'How to cancel a confirmed booking', 'How to report a payment or refund issue, for example if a guest or host is asking to pay or be paid outside of the Contoso Real Estate platform', ], - DEFAULT_PROMPTS_HEADING: 'Start a conversation with our support team.', + DEFAULT_PROMPTS_HEADING_CHAT: 'Chat with our support team', + DEFAULT_PROMPTS_HEADING_ASK: 'Ask a question', // This are the chat bubbles that will be displayed in the chat CHAT_MESSAGES: [], // This are the labels for the chat button and input @@ -48,5 +49,8 @@ const chatHttpOptions = { method: 'POST', stream: true, }; +// these can be set from developer settings! +const INTERACTION_MODEL = ['chat', 'ask']; +const APPROACH_MODEL = ['rrr', 'rtr']; -export { globalConfig, requestOptions, chatHttpOptions, NEXT_QUESTION_INDICATOR }; +export { globalConfig, requestOptions, chatHttpOptions, NEXT_QUESTION_INDICATOR, INTERACTION_MODEL, APPROACH_MODEL }; diff --git a/packages/chat-component/src/core/http/index.ts b/packages/chat-component/src/core/http/index.ts index ad56f1e8..f5effba3 100644 --- a/packages/chat-component/src/core/http/index.ts +++ b/packages/chat-component/src/core/http/index.ts @@ -2,22 +2,29 @@ export async function callHttpApi( { question, type, approach, overrides }: ChatRequestOptions, { method, url, stream }: ChatHttpOptions, ) { + const chatBody = JSON.stringify({ + history: [ + { + user: question, + }, + ], + approach, + overrides, + stream, + }); + const askBody = JSON.stringify({ + question, + approach, + overrides, + stream: false, + }); + const body = type === 'chat' ? chatBody : askBody; return await fetch(`${url}${type}`, { method: method, headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify({ - // must enable history persistence - history: [ - { - user: question, - }, - ], - approach, - overrides, - stream, - }), + body, }); } @@ -26,8 +33,8 @@ export async function getAPIResponse( httpOptions: ChatHttpOptions, ): Promise { const response = await callHttpApi(requestOptions, httpOptions); - - if (httpOptions.stream) { + const streamResponse = requestOptions.type === 'ask' ? false : httpOptions.stream; + if (streamResponse) { return response; } diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index 008cce21..41a23fb2 100644 --- a/packages/chat-component/src/main.ts +++ b/packages/chat-component/src/main.ts @@ -3,7 +3,7 @@ import { LitElement, html } from 'lit'; import DOMPurify from 'dompurify'; import { customElement, property, query } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { chatHttpOptions, globalConfig, requestOptions } from './config/global-config.js'; +import { chatHttpOptions, globalConfig, requestOptions, INTERACTION_MODEL } from './config/global-config.js'; import { getAPIResponse } from './core/http/index.js'; import { parseStreamedMessages } from './core/parser/index.js'; import { mainStyle } from './style.js'; @@ -43,6 +43,11 @@ export class ChatComponent extends LitElement { isResponseCopied = false; @property({ type: Boolean }) isStreaming = false; + // interaction type: should come from dynamic settings + // INTERACTION_MODEL defines the UI presentation and behavior + // but for now we can switch between 'chat' and 'ask', using this + @property({ type: String }) + interactionModel = INTERACTION_MODEL[0]; // api response apiResponse = {} as BotResponse | Response; // These are the chat bubbles that will be displayed in the chat @@ -139,28 +144,29 @@ export class ChatComponent extends LitElement { // Handle the click on the chat button and send the question to the API async handleUserChatSubmit(event: Event): Promise { event.preventDefault(); - const type = 'chat'; const question = DOMPurify.sanitize(this.questionInput.value); if (question) { this.currentQuestion = question; try { - this.isStreaming = type === 'chat' && this.chatHttpOptions.stream; + const type = this.interactionModel; + this.isStreaming = type === 'ask' ? false : this.chatHttpOptions.stream; // Remove default prompts this.isChatStarted = true; this.hasDefaultPromptsEnabled = false; // Disable the input field and submit button while waiting for the API response this.isDisabled = true; // Show loading indicator while waiting for the API response - this.processApiResponse({ message: question, isUserMessage: true }); this.isAwaitingResponse = true; + if (type === 'chat') { + this.processApiResponse({ message: question, isUserMessage: true }); + } this.apiResponse = await getAPIResponse({ ...this.chatRequestOptions, question, type }, this.chatHttpOptions); this.questionInput.value = ''; this.isAwaitingResponse = false; this.isDisabled = false; this.isResetInput = false; - const response = this.apiResponse as BotResponse; const message: string = response.answer; await this.processApiResponse({ message, isUserMessage: false }); @@ -356,7 +362,11 @@ export class ChatComponent extends LitElement { ${this.hasDefaultPromptsEnabled ? html`
-

${this.defaultPromptsHeading}

+

+ ${this.interactionModel === 'chat' + ? globalConfig.DEFAULT_PROMPTS_HEADING_CHAT + : globalConfig.DEFAULT_PROMPTS_HEADING_ASK} +

    ${this.defaultPrompts.map( (prompt) => html`