fix: pass the chat history in the api call

Author: shibbas

packages/chat-component/src/components/chat-component.ts

@@ -7,6 +7,7 @@ import { chatHttpOptions, globalConfig, teaserListTexts, requestOptions } from '
 import { chatStyle } from '../styles/chat-component.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { produce } from 'immer';
+import { chatEntryToString } from '../utils/index.js';
 
 // TODO: allow host applications to customize these icons
 
@@ -130,6 +131,27 @@ export class ChatComponent extends LitElement {
  }
  }
 
+ getMessageContext(): Message[] {
+ if (this.interactionModel === 'ask') {
+ return [];
+ }
+
+ const history = [
+ ...this.chatThread,
+ // include the history from the previous session if the user has enabled the chat history
+ ...(this.chatHistoryController.showChatHistory ? this.chatHistoryController.chatHistory : []),
+ ];
+
+ const messages: Message[] = history.map((entry) => {
+ return {
+ content: chatEntryToString(entry),
+ role: entry.isUserMessage ? 'user' : 'assistant',
+ };
+ });
+
+ return messages;
+ }
+
  // Handle the click on the chat button and send the question to the API
  async handleUserChatSubmit(event: Event): Promise<void> {
  event.preventDefault();
@@ -148,6 +170,7 @@ export class ChatComponent extends LitElement {
  },
  question,
  type: this.interactionModel,
+ messages: this.getMessageContext(),
  },
  {
  // use defaults

packages/chat-component/src/components/chat-thread-component.ts

@@ -6,6 +6,7 @@ import { styles } from '../styles/chat-thread-component.js';
 import { globalConfig } from '../config/global-config.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { chatEntryToString } from '../utils/index.js';
 
 import iconSuccess from '../../public/svg/success-icon.svg?raw';
 import iconCopyToClipboard from '../../public/svg/copy-icon.svg?raw';
@@ -42,9 +43,7 @@ export class ChatThreadComponent extends LitElement {
 
  // Copy response to clipboard
  copyResponseToClipboard(entry: ChatThreadEntry): void {
- const response = entry.text
- .map((textEntry) => textEntry.value + '\n\n' + textEntry.followingSteps?.map((s) => ' - ' + s).join('\n'))
- .join('\n\n');
+ const response = chatEntryToString(entry);
 
  navigator.clipboard.writeText(response);
  this.isResponseCopied = true;

packages/chat-component/src/core/http/index.ts

@@ -1,7 +1,7 @@
 import { ChatResponseError } from '../../utils/index.js';
 
 export async function callHttpApi(
- { question, type, approach, overrides }: ChatRequestOptions,
+ { question, type, approach, overrides, messages }: ChatRequestOptions,
  { method, url, stream, signal }: ChatHttpOptions,
 ) {
  return await fetch(`${url}/${type}`, {
@@ -12,6 +12,7 @@ export async function callHttpApi(
  signal,
  body: JSON.stringify({
  messages: [
+ ...(messages ?? []),
  {
  content: question,
  role: 'user',

packages/chat-component/src/types.d.ts

@@ -40,6 +40,7 @@ declare interface ChatRequestOptions {
  overrides: RequestOverrides;
  type: string;
  question: string;
+ messages?: Message[];
 }
 
 declare interface RequestOverrides {

packages/chat-component/src/utils/index.ts

@@ -77,6 +77,15 @@ export function getTimestamp() {
  });
 }
 
+export function chatEntryToString(entry: ChatThreadEntry) {
+ const message = entry.text
+ .map((textEntry) => textEntry.value + '\n\n' + textEntry.followingSteps?.map((s, i) => `${i + 1}.` + s).join('\n'))
+ .join('\n\n')
+ .replaceAll(/<sup[^>]*>(.*?)<\/sup>/g, ''); // remove the <sup> tags from the message
+
+ return message;
+}
+
 // Creates a new chat message error
 export class ChatResponseError extends Error {
  code?: number;