Chunked responses from Azure OpenAI and Azure AI Search in Angular app

Question

I'm implementing Retrieval-Augmented Generation (RAG) using Azure AI Search and Azure OpenAI to summarize search results in an Angular application. The search index is not chunked or vectorized, but the OpenAI chat completion is returning responses in a chunked array format with improper references like [doc1], [doc2], etc. This format is making it difficult to process the data correctly. Please help in resolve this issue.

Below is the OpenAI service code used:

import { Injectable } from '@angular/core';
import { AzureKeyCredential, OpenAIClient } from '@azure/openai';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root',
})
export class OpenAiService {
  private client: OpenAIClient;

  constructor() {
    const endpoint = environment.openAiEndpoint;
    const apiKey = environment.openAiApiKey;
    this.client = new OpenAIClient(endpoint, new AzureKeyCredential(apiKey));
  }

  async search(prompt: string): Promise<any> {
    const deploymentId = environment.openAiDeploymentId;

    let systemMessage = `You are a cheerful news assistant who generates news summaries related to the user query. Please ensure each summary is clear, concise, and includes relevant details from the articles referenced. Avoid unnecessary punctuation such as commas between words.`;

    const messages = [
      { role: 'system', content: systemMessage },
      { role: 'user', content: prompt },
    ];

    const options = {
      maxTokens: 800,
      topP: 0.95, 
      temperature: 0.7, 
      frequencyPenalty: 0,
      presencePenalty: 0,
      azureExtensionOptions: {
        extensions: [
          {
            type: 'azure_search',
            endpoint: environment.searchEndpoint,
            indexName: environment.indexName,
            authentication: {
              type: 'api_key',
              key: environment.searchApiKey,
            },
          },
        ],
      },
    };

    const events = await this.client.streamChatCompletions(deploymentId, messages, options);

    const results = [];
    for await (const event of events) {
      for (const choice of event.choices) {
        results.push(choice.delta?.content);
      }
    }
    return results.join(' ');
  }
}

The sample output is as below:

,Here, are, some, recent, news, articles, related, to, Ukraine,:

,1,., **,Russian, War,ships, in, the, Caribbean,**,:, A, fleet, of, Russian, war,ships, began, entering, the, Caribbean,,, which, is, seen, as, a, show, of, strength, amid, growing, tensions, over, Western, support, for, Ukraine, [doc1].

,2,., **,N,ATO, and, Hungary,'s, Position,**,:, NATO, Secretary, General, Jens, Stol,ten,berg, agreed, to, allow, Hungary, to, opt, out, of, the, alliance,'s, deep,ening, support, for, Ukraine,., In, return,,, Hungary, will, not, block, any, related, NATO, decisions, [doc2].

,3,., **,U,.S,., L,ifts, Ban, on, Az,ov, Brigade,**,:, The, U,.S,., has, lifted, restrictions, on, the, transfer, of, American, weapons, and, training, to, the, Ukrainian, Az,ov, Brigade,,, a, military, unit, with, a, controversial, history, but, recognized, as, one, of, Ukraine,'s, most, effective, fighting, forces, [doc3].

,4,., **,Res,ignation, of, Ukrainian, Official,**,:, Mustafa, N,ayy,em,,, the, top, official, overseeing, Ukraine,'s, defense, fort,ifications, and, reconstruction, efforts,,, resigned,., This, marks, the, latest, high,-profile, departure, in, the, Zel,ensky, administration, [doc4].