Streaming Response from .NET Core API to Angular Frontend

I'm creating RAG using Azure Technologies. To do that I need to Stream content to frontend to quick result. otherwise it takes long time to response.

here is my .NET Core API Code

[HttpPost("getCopilotResponseV3")]
public IEnumerable<string> GetCopilotResponsev3(BLCopilotRequestV2 req)
{
CollectionResult<StreamingChatCompletionUpdate> response;
try
{
response = _bLOpenAIService.GetOpenAIResponseStream(req);
}
catch (Exception ex)
{
_logger.LogError(ex, "Error getting OpenAI response stream.");
yield break;
}

var enumerator = response.GetEnumerator();
using (enumerator)
{
while (enumerator.MoveNext())
{
foreach(var cnt in enumerator.Current.ContentUpdate)
{
yield return cnt.Text;
}
}
}
}


here is angular service code I wrote

requestFromBLCopilotAIV3(request: BLCopilotRequestV2) {
return this.http
.post(environment.getEndpoint() + 'Common/getCopilotResponseV3', request,{
responseType: 'text',observe: 'events'
});
}


here is frontend componenet code

this.copilotService.requestFromBLCopilotAIV3({ messageList: cpMessageList, indexName: this.copilotComponent.defaultValue, semanticConfigName:this.copilotComponent.mapName } as BLCopilotRequestV2)
.pipe(takeUntil(this.stopSignal))
.subscribe({
next: (event : any) => {
console.log(event)
},
complete: () => {
//this.changeDetector.detectChanges();
},
error: (err) => {
console.error(err);
this.isLoading = false;
this.responseStarted = false;
this.changeDetector.detectChanges();
}


});


now when i testing console inside next will print like this

{
"headers": {
"normalizedNames": {},
"lazyUpdate": null
},
"status": 200,
"statusText": "OK",
"url": "https://localhost:7036/api/Common/getBLCopilotResponseV3",
"ok": true,
"type": 4,
"body": "[\"The\",\" requested\",\" information\",\" is\",\" not\",\" available\",\" in\",\" the\",\" retrieved\",\" data\",\".\",\" Please\",\" try\",\" another\",\" query\",\" or\",\" topic\",\".\"]"
}


it's ok content not found respone it's not a problem but this is not my expected output. my expected output is

the
requested
information
is
not
found


like one by one response. yield return seems ok. how can i have that kind of output instead having entire respone.

Continue reading...