I am not expert in this matter but after checking the code and some old thread, you may need to update the search
method and add a formatResponse
method:
async search(prompt: string): Promise<any> {
const deploymentId = environment.openAiDeploymentId;
const 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);
let responseChunks = [];
for await (const event of events) {
for (const choice of event.choices) {
if (choice.delta?.content) {
responseChunks.push(choice.delta.content);
}
}
}
const fullResponse = responseChunks.join('').replace(/, /g, ' ');
return this.formatResponse(fullResponse);
}
private formatResponse(response: string): string {
// Clean up extra commas and spaces
response = response
.replace(/,\s*/g, ' ')
.replace(/\s+/g, ' ')
.trim();
// Properly format references
const formattedResponse = response.replace(/\[doc(\d+)\]/g, (match, docId) => {
return `<sup>[${docId}]</sup>`;
});
return formattedResponse;
}
Add the onSearch
method in your Angular component:
import { Component, OnInit } from '@angular/core';
import { OpenAiService } from './services/open-ai.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
searchResult: string = '';
constructor(private openAiService: OpenAiService) {}
ngOnInit() {}
async onSearch(prompt: string) {
try {
this.searchResult = await this.openAiService.search(prompt);
} catch (error) {
console.error('Error fetching search result', error);
}
}
}
Add the following HTML to your template:
<div>
<input #promptInput type="text" placeholder="Enter your query">
<button (click)="onSearch(promptInput.value)">Search</button>
</div>
<div [innerHTML]="searchResult"></div>