refactor: remove @microsoft/ai-chat-protocol dependency

Author: sinedied

package-lock.json

@@ -26,7 +26,6 @@
     "@langchain/langgraph": "^0.4.9",
     "@langchain/mcp-adapters": "^0.6.0",
     "@langchain/openai": "^0.6.13",
-    "@microsoft/ai-chat-protocol": "^1.0.0-beta.20240814.1",
     "@opentelemetry/exporter-trace-otlp-http": "^0.205.0",
     "@opentelemetry/instrumentation": "^0.205.0",
     "@opentelemetry/sdk-trace-base": "^2.1.0",

packages/agent-api/package.json

@@ -1,7 +1,6 @@
 import { Readable } from 'node:stream';
 import { randomUUID } from 'node:crypto';
 import { HttpRequest, InvocationContext, HttpResponseInit, app } from '@azure/functions';
-import { AIChatCompletionRequest, AIChatCompletionDelta } from '@microsoft/ai-chat-protocol';
 import { ChatOpenAI } from '@langchain/openai';
 import { AzureCosmsosDBNoSQLChatMessageHistory } from '@langchain/azure-cosmosdb';
 import { createReactAgent } from "@langchain/langgraph/prebuilt";
@@ -11,6 +10,7 @@ import { StreamEvent } from '@langchain/core/tracers/log_stream.js';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
 import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { getAzureOpenAiTokenProvider, getCredentials, getInternalUserId } from '../auth.js';
+import { type AIChatCompletionRequest, type AIChatCompletionDelta } from '../models.js';
 
 const agentSystemPrompt = `## Role
 You an expert assistant that helps users with managing burger orders. Use the provided tools to get the information you need and perform actions on behalf of the user.

packages/agent-api/src/functions/chats-post.ts

@@ -4,3 +4,34 @@ export type IntermediateStep = {
   input?: string;
   output?: string;
 }
+
+export type AIChatRole = "user" | "assistant" | "system";
+
+export type AIChatContext = Record<string, any>;
+
+export type AIChatMessage = {
+  role: AIChatRole;
+  content: string;
+  context?: AIChatContext;
+}
+
+export type AIChatMessageDelta = {
+  role?: AIChatRole;
+  content?: string;
+  context?: AIChatContext;
+}
+
+export type AIChatCompletion = {
+  message: AIChatMessage;
+  context?: AIChatContext;
+}
+
+export type AIChatCompletionDelta = {
+  delta: AIChatMessageDelta;
+  context?: AIChatContext;
+}
+
+export type AIChatCompletionRequest = {
+  messages: AIChatMessage[];
+  context?: AIChatContext;
+}

packages/agent-api/src/models.ts

@@ -20,7 +20,6 @@
   "author": "Microsoft",
   "license": "MIT",
   "dependencies": {
-    "@microsoft/ai-chat-protocol": "^1.0.0-beta.20240814.1",
     "dompurify": "^3.0.0",
     "lit": "^3.0.0",
     "marked": "^16.2.1"

packages/agent-webapp/package.json

@@ -3,8 +3,8 @@ import { map } from 'lit/directives/map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { customElement, property, state, query } from 'lit/decorators.js';
-import { type AIChatCompletionDelta, type AIChatMessage } from '@microsoft/ai-chat-protocol';
 import { type ChatRequestOptions, getCompletion } from '../services/api.service.js';
+import { type AIChatMessage } from '../models.js';
 import { type ParsedMessage, parseMessageIntoHtml } from '../message-parser.js';
 import sendSvg from '../../assets/icons/send.svg?raw';
 import questionSvg from '../../assets/icons/question.svg?raw';
@@ -130,15 +130,14 @@ export class ChatComponent extends LitElement {
     this.isLoading = true;
     this.scrollToLastMessage();
     try {
-      const response = getCompletion({
+      const chunks = await getCompletion({
         ...this.options,
         messages: this.messages,
         context: {
           userId: this.userId,
           sessionId: this.sessionId,
         },
       });
-      const chunks = response as AsyncGenerator<AIChatCompletionDelta>;
       const { messages } = this;
       const message: AIChatMessage = {
         content: '',

packages/agent-webapp/src/components/chat.ts

@@ -6,3 +6,4 @@ export * from './components/user-card.js';
 export * from './components/debug.js';
 export * from './components/history.js';
 export * from './message-parser.js';
+export * from './models.js';

packages/agent-webapp/src/index.ts

@@ -2,7 +2,7 @@ import { type HTMLTemplateResult, html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { type AIChatMessage } from '@microsoft/ai-chat-protocol';
+import { type AIChatMessage } from './models';
 
 export type ParsedMessage = {
   content: string;

packages/agent-webapp/src/message-parser.ts

@@ -0,0 +1,25 @@
+export type AIChatRole = "user" | "assistant" | "system";
+
+export type AIChatContext = Record<string, any>;
+
+export type AIChatMessage = {
+  role: AIChatRole;
+  content: string;
+  context?: AIChatContext;
+}
+
+export type AIChatMessageDelta = {
+  role?: AIChatRole;
+  content?: string;
+  context?: AIChatContext;
+}
+
+export type AIChatCompletion = {
+  message: AIChatMessage;
+  context?: AIChatContext;
+}
+
+export type AIChatCompletionDelta = {
+  delta: AIChatMessageDelta;
+  context?: AIChatContext;
+}

packages/agent-webapp/src/models.ts

@@ -1,4 +1,4 @@
-import { AIChatMessage, AIChatCompletionDelta, AIChatProtocolClient } from '@microsoft/ai-chat-protocol';
+import { type AIChatMessage, type AIChatCompletionDelta } from '../models.js';
 
 export const apiBaseUrl: string = import.meta.env.VITE_API_URL || '';
 
@@ -9,20 +9,69 @@ export type ChatRequestOptions = {
   apiUrl: string;
 };
 
-export async function* getCompletion(options: ChatRequestOptions) {
+export async function getCompletion(options: ChatRequestOptions) {
   const apiUrl = options.apiUrl || apiBaseUrl;
-  const client = new AIChatProtocolClient(`${apiUrl}/api/chats`);
-  const result = await client.getStreamedCompletion(options.messages, { context: options.context });
+  const response = await fetch(`${apiUrl}/api/chats/stream`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      messages: options.messages,
+      context: options.context || {},
+    }),
+  });
 
-  for await (const response of result) {
-    if (!response.delta) {
-      continue;
-    }
+  if (response.status > 299 || !response.ok) {
+    let json: JSON | undefined;
+    try {
+      json = await response.json();
+    } catch {}
 
-    yield new Promise<AIChatCompletionDelta>((resolve) => {
+    const error = json?.['error'] ?? response.statusText;
+    throw new Error(error);
+  }
+
+  return getChunksFromResponse<AIChatCompletionDelta>(response, options.chunkIntervalMs);
+}
+
+class NdJsonParserStream extends TransformStream<string, JSON> {
+  private buffer = '';
+  constructor() {
+    let controller: TransformStreamDefaultController<JSON>;
+    super({
+      start(_controller) {
+        controller = _controller;
+      },
+      transform: (chunk) => {
+        const jsonChunks = chunk.split('\n').filter(Boolean);
+        for (const jsonChunk of jsonChunks) {
+          try {
+            this.buffer += jsonChunk;
+            controller.enqueue(JSON.parse(this.buffer));
+            this.buffer = '';
+          } catch {
+            // Invalid JSON, wait for next chunk
+          }
+        }
+      },
+    });
+  }
+}
+
+export async function* getChunksFromResponse<T>(response: Response, intervalMs: number): AsyncGenerator<T, void> {
+  const reader = response.body?.pipeThrough(new TextDecoderStream()).pipeThrough(new NdJsonParserStream()).getReader();
+  if (!reader) {
+    throw new Error('No response body or body is not readable');
+  }
+
+  let value: JSON | undefined;
+  let done: boolean;
+  // eslint-disable-next-line no-await-in-loop
+  while ((({ value, done } = await reader.read()), !done)) {
+    const chunk = value as T;
+    yield new Promise<T>((resolve) => {
       setTimeout(() => {
-        resolve(response);
-      }, options.chunkIntervalMs);
+        resolve(chunk);
+      }, intervalMs);
     });
   }
 }