fix: pass the chat history in the api call

Azure-Samples · Nov 30, 2023 · 071fb38 · 071fb38
1 parent 24a0093
commit 071fb38
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git a/packages/chat-component/src/components/chat-component.ts b/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

diff --git a/packages/chat-component/src/components/chat-thread-component.ts b/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;

diff --git a/packages/chat-component/src/core/http/index.ts b/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',

diff --git a/packages/chat-component/src/types.d.ts b/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 {

diff --git a/packages/chat-component/src/utils/index.ts b/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;