15 Implementation.md

Customizing Parameters

The code includes the following customizable parameters:

const deployment = 'gpt-4o-mini';
const apiKey = 'OPENAI_API_KEY';

• deployment: Model name.
• apiKey: Secret key for accessing the OpenAI API.

OpenAI Initialization

The code creates an OpenAI instance:

const chatService = new OpenAI({
    dangerouslyAllowBrowser: true,
    apiKey,
});

Setting dangerouslyAllowBrowser: true lets the browser send requests directly to the OpenAI API. Use this with caution since the key will be visible in the client code. For production, route requests to OpenAI through your backend.

Sending and Receiving Messages

The code accesses the OpenAI Chat Completion API with the getAIResponse(messages) function:

async function getAIResponse(messages) { 
    const params = { 
        messages: messages, 
        model: deployment, 
    }; 

    const response = await chatService.chat.completions.create(params); 
    const data = { choices: response.choices }; 

    return data.choices[0].message?.content; 
}; 

The messages parameter refers to the dialog history, an array of objects formatted as {role: 'user'|'assistant', content: '...'}. Key parameters:

• messages: The chat history, with the user's latest message at the end.
• model: The model in use.

The function returns the assistant’s new response text.

DevExpress.data.CustomStore and DevExpress.data.DataSource manage and render message states. The functions renderAssistantMessage and updateLastMessage insert or update messages in the interface, and adjust button states (copy text, regenerate response).

The "Regenerate" button allows you to request a new response from the assistant for the last message. This replaces the previous unsuccessful response. The regenerate function calls getAIResponse again.