Address PR comments

Author: Maryanne Gichohi

articles/azure-app-configuration/howto-chat-completion-config.md

@@ -18,27 +18,32 @@ Chat completion is an AI capability that enables models to generate conversation
 - An Azure account with an active subscription. [Create one for free](https://azure.microsoft.com/free)
 - An App Configuration store. [Create a store](./quickstart-azure-app-configuration-create.md#create-an-app-configuration-store).
 
-> [!NOTE]
-> This tutorial demonstrates how to use chat completion configuration with an Azure OpenAI model. However, the chat completion configuration demonstrated in the tutorial can be applied to any AI model you choose to work with in your application.
->
-
 ## Create a chat completion configuration
 
 In this section, you will create a chat completion configuration in Azure Portal using the GPT-4o model as an example.
 
  1. In Azure portal, navigate to your App configuration store. From the **Operations** menu, select **Configuration explorer** > **Create**. Then select **AI configuration**.
 
  1. Specify the following values:
-    - **Key**: Type **ChatLLM:Model**.
+    - **Key**: Type **ChatApp:Model**.
     - **Label**: Leave this value blank.
     - **Model**: Select **gpt-4o**.
+    - **Message**: Add a new message.
+        - **Role**: Select **user**
+        - **Content**: Type "What is the capial of France?"
 
     > [!div class="mx-imgBorder"]
     > ![Screen shot shows the create new AI configuration form](./media/create-ai-chat-completion-config.png)
     
 1. Leave the rest of the values as default then select **Apply**.
 
-## Create an Azure OpenAI resource
+## Add model connection configuration
+
+You've added your chat completion configuration named  **ChatApp:Model** in the previous section. In this section, you'll add your model connection details such as the model's API key and endpoint to App configuration. You can store the model API key as a Key Vault reference.
+
+> [!NOTE]
+> This tutorial demonstrates how to use chat completion configuration with an Azure OpenAI model. However, the chat completion configuration demonstrated in the tutorial can be applied to any AI model you choose to work with in your application.
+>
 
 1. Follow the [Get started with Azure OpenAI Service](/azure/ai-services/openai/overview#get-started-with-azure-openai-service) to create and deploy an Azure OpenAI service resource with following settings:
 
@@ -51,22 +56,12 @@ In this section, you will create a chat completion configuration in Azure Portal
 
 1. Navigate to your App Configuration store and add the following key-value. Leave **Label** and **Content Type** with their default values. For more information about how to add key-values to a store using the Azure portal or the CLI, go to [Create a key-value](./quickstart-azure-app-configuration-create.md#create-a-key-value).
 
-    | **Key**             | **Value**                                                      |
-    |---------------------|----------------------------------------------------------------|
-    | _ChatLLM:Endpoint_  | _Paste the resource endpoint you copied in the previous step_  |
-    
-1. Continue to the following instructions to implement the chat completion configuration into your application for the language or platform you are using.
-
-    - [.NET](./quickstart-chat-completion-dotnet.md)
+    | **Key**                          | **Value**                                                      |
+    |----------------------------------|----------------------------------------------------------------|
+    |  _ChatApp:AzureOpenAI:Endpoint_  | _Paste the resource endpoint you copied in the previous step_  |
+ 
+1. To store your Azure OpenAI resource API key as a Key Vault reference, refer to [Add a Key Vault reference to App Configuration](./use-key-vault-references-dotnet-core.md#add-a-key-vault-reference-to-app-configuration) guide to add a Key Vault reference with the key _ChatApp:AzureOpenAI:ApiKey_.
 
-> [!TIP]
-> To store your Azure OpenAI API key securely, consider storing it as a Key Vault reference.  
-> - In your Azure OpenAI resource, from the **Resource Management** menu, select **Keys and Endpoint** and copy your API key.
-> - In your App Configuration store, add a new Key Vault reference with the **Key** set to `ChatLLM:ApiKey` and the **Value** set as a Key Vault reference.
-> - For step-by-step guidance, see [Add a Key Vault reference to App Configuration](./use-key-vault-references-dotnet-core.md#add-a-key-vault-reference-to-app-configuration).
-
-
-## Next steps
+1. Continue to the following instructions to implement the chat completion configuration into your application for the language or platform you are using.
 
-> [!div class="nextstepaction"]
-> [AI configuration](./concept-ai-configuration.md)
+    - [.NET](./quickstart-chat-completion-dotnet.md)

articles/azure-app-configuration/media/create-ai-chat-completion-config.png

@@ -66,8 +66,8 @@ In this guide, you build an AI chat application and iterate on the prompt using
             string endpoint = Environment.GetEnvironmentVariable("AZURE_APPCONFIGURATION_ENDPOINT");
 
             options.Connect(new Uri(endpoint), credential)
-                   // Load all keys that start with `ChatLLM:` and have no label.
-                   .Select("ChatLLM:*")
+                   // Load all keys that start with `ChatApp:` and have no label.
+                   .Select("ChatApp:*")
                    // Reload configuration if any selected key-values have changed.
                    // Use the default refresh interval of 30 seconds. It can be overridden via AzureAppConfigurationRefreshOptions.SetRefreshInterval.
                    .ConfigureRefresh(refresh =>
@@ -85,19 +85,19 @@ In this guide, you build an AI chat application and iterate on the prompt using
 
     ```csharp
     // Initialize the AzureOpenAIClient
-    var openAIEndpoint = configuration["ChatLLM:Endpoint"];
+    var openAIEndpoint = configuration["ChatApp:AzureOpenAI:Endpoint"];
     AzureOpenAIClient client = new AzureOpenAIClient(new Uri(openAIEndpoint), credential);
     ```
 
     To access your Azure OpenAI resource with an API key, add the following code:
 
     ```csharp
     // Initialize the AzureOpenAIClient
-    var apiKey = configuration["ChatLLM:ApiKey"];
+    var apiKey = configuration["ChatApp:AzureOpenAI:ApiKey"];
     AzureOpenAIClient client = new AzureOpenAIClient(new Uri(openAIEndpoint), new AzureKeyCredential(apiKey));
     ```
 
-    If the key _ChatLLM:ApiKey_ is a Key Vault reference in App Configuration, make sure to add the following code snippet to the `AddAzureAppConfiguration` call and [grant your app access to Key Vault](./use-key-vault-references-dotnet-core.md#grant-your-app-access-to-key-vault).
+    If the key _ChatApp:AzureOpenAI:ApiKey_ is a Key Vault reference in App Configuration, make sure to add the following code snippet to the `AddAzureAppConfiguration` call and [grant your app access to Key Vault](./use-key-vault-references-dotnet-core.md#grant-your-app-access-to-key-vault).
 
     ```cshrap
     options.ConfigureKeyVault(keyVaultOptions =>
@@ -141,41 +141,36 @@ In this guide, you build an AI chat application and iterate on the prompt using
 
     ```csharp
     ...
-    var modelConfig = configuration.GetSection("ChatLLM:Model").Get<ModelConfiguration>();
-    
-    ChatClient chatClient = client.GetChatClient(modelConfig.Model);
+    var modelConfiguration = configuration.GetSection("ChatApp:Model").Get<ModelConfiguration>();
+
+    ChatClient chatClient = client.GetChatClient(modelConfiguration.Model);
 
     // Configure chat completion options
     ChatCompletionOptions options = new ChatCompletionOptions
     {
-        Temperature = modelConfig.Temperature,
-        MaxOutputTokenCount = modelConfig.MaxTokens,
-        TopP = modelConfig.TopP
+        Temperature = modelConfiguration.Temperature,
+        MaxOutputTokenCount = modelConfiguration.MaxTokens,
+        TopP = modelConfiguration.TopP
     };
+
+    foreach (var message in modelConfiguration.Messages)
+    {
+        Console.WriteLine($"{message.Role}: {message.Content}");
+    }
     ```
 
 1. Update the _Program.cs_ file to add a helper method `GetChatMessages` to process chat messages:
 
     ```csharp
     // Helper method to convert configuration messages to chat API format
-    IEnumerable<ChatMessage> GetChatMessages(ModelConfiguration model)
+    IEnumerable<ChatMessage> GetChatMessages(ModelConfiguration modelConfiguration)
     {
-        var chatMessages = new List<ChatMessage>();
-
-        foreach (Message message in model.Messages)
+        return modelConfiguration.Messages.Select<Message, ChatMessage>(message => message.Role switch
         {
-            switch (message.Role)
-            {
-                case "system":
-                    chatMessages.Add(ChatMessage.CreateSystemMessage(message.Content));
-                    break;
-                case "user":
-                    chatMessages.Add(ChatMessage.CreateUserMessage(message.Content));
-                    break;
-            }
-        }
-
-        return chatMessages;
+            "system" => ChatMessage.CreateSystemMessage(message.Content),
+            "user" => ChatMessage.CreateUserMessage(message.Content),
+            "assistant" => ChatMessage.CreateAssistantMessage(message.Content)
+        });
     }
     ```
 
@@ -184,16 +179,14 @@ In this guide, you build an AI chat application and iterate on the prompt using
     ...
 
     // CompleteChatAsync method generates a completion for the given chat
-    IEnumerable<ChatMessage> messages = GetChatMessages(modelConfig);
+    IEnumerable<ChatMessage> messages = GetChatMessages(modelConfiguration);
 
     ChatCompletion completion = await chatClient.CompleteChatAsync(messages, options);
 
-    Console.WriteLine("-------------------Model response--------------------------");
-    Console.WriteLine(completion.Content[0].Text);
-    Console.WriteLine("-----------------------------------------------------------");
+    Console.WriteLine($"AI response: {completion.Content[0].Text}");
 
+    Console.WriteLine("Press Enter to continue...");
     Console.ReadLine();
-    Console.Clear();
     ...
     ```
 
@@ -208,17 +201,16 @@ In this guide, you build an AI chat application and iterate on the prompt using
     {
         if (_refresher != null)
         {
+            // Refresh the configuration from Azure App Configuration
             await _refresher.RefreshAsync();
 
             // Existing code
             //
             
-            Console.WriteLine("-------------------Model response--------------------------");
-            Console.WriteLine(completion.Content[0].Text);
-            Console.WriteLine("-----------------------------------------------------------");
+            Console.WriteLine($"AI response: {completion.Content[0].Text}");
 
+            Console.WriteLine("Press Enter to continue...");
             Console.ReadLine();
-            Console.Clear();
         }
     }
     ```
@@ -243,73 +235,68 @@ In this guide, you build an AI chat application and iterate on the prompt using
             string endpoint = Environment.GetEnvironmentVariable("AZURE_APPCONFIGURATION_ENDPOINT");
 
             options.Connect(new Uri(endpoint), credential)
-                   // Load all keys that start with `ChatLLM:` and have no label.
-                   .Select("ChatLLM:*")
-                   // Reload configuration if any selected key-values have changed.
-                   // Use the default refresh interval of 30 seconds. It can be overridden via AzureAppConfigurationRefreshOptions.SetRefreshInterval
-                   .ConfigureRefresh(refresh =>
-                   {
-                       refresh.RegisterAll();
-                   });
+                // Load all keys that start with `ChatApp:*` and have no label.
+                .Select("ChatApp:*")
+                // Reload configuration if any selected key-values have changed.
+                // Use the default refresh interval of 30 seconds. It can be overridden via AzureAppConfigurationRefreshOptions.SetRefreshInterval.
+                .ConfigureRefresh(refresh =>
+                {
+                    refresh.RegisterAll();
+                });
 
             _refresher = options.GetRefresher();
-
         }).Build();
 
-    var openAIEndpoint = configuration["ChatLLM:Endpoint"];
-
     // Initialize the AzureOpenAIClient
+    var openAIEndpoint = configuration["ChatApp:AzureOpenAI:Endpoint"];
+
     AzureOpenAIClient client = new AzureOpenAIClient(new Uri(openAIEndpoint), credential);
 
     while (true)
     {
         if (_refresher != null)
         {
+            // Refresh the configuration from Azure App Configuration
             await _refresher.RefreshAsync();
 
-            var modelConfig = configuration.GetSection("ChatLLM:Model").Get<ModelConfiguration>();
-        
-            ChatClient chatClient = client.GetChatClient(modelConfig.Model);
+            var modelConfiguration = configuration.GetSection("ChatApp:Model").Get<ModelConfiguration>();
+
+            ChatClient chatClient = client.GetChatClient(modelConfiguration.Model);
 
             // Configure chat completion options
             ChatCompletionOptions options = new ChatCompletionOptions
             {
-                Temperature = modelConfig.Temperature,
-                MaxOutputTokenCount = modelConfig.MaxTokens,
-                TopP = modelConfig.TopP
+                Temperature = modelConfiguration.Temperature,
+                MaxOutputTokenCount = modelConfiguration.MaxTokens,
+                TopP = modelConfiguration.TopP
             };
 
-            IEnumerable<ChatMessage> messages = GetChatMessages(modelConfig);
+            foreach (var message in modelConfiguration.Messages)
+            {
+                Console.WriteLine($"{message.Role}: {message.Content}");
+            }
+
+            // CompleteChatAsync method generates a completion for the given chat
+            IEnumerable<ChatMessage> messages = GetChatMessages(modelConfiguration);
 
             ChatCompletion completion = await chatClient.CompleteChatAsync(messages, options);
 
-            Console.WriteLine("-------------------Model response--------------------------");
-            Console.WriteLine(completion.Content[0].Text);
-            Console.WriteLine("-----------------------------------------------------------");
+            Console.WriteLine($"AI response: {completion.Content[0].Text}");
 
+            Console.WriteLine("Press Enter to continue...");
             Console.ReadLine();
-            Console.Clear();
         }
     }
 
-    IEnumerable<ChatMessage> GetChatMessages(ModelConfiguration model)
+    // Helper method to convert configuration messages to chat API format
+    IEnumerable<ChatMessage> GetChatMessages(ModelConfiguration modelConfiguration)
     {
-        var chatMessages = new List<ChatMessage>();
-
-        foreach (Message message in model.Messages)
+        return modelConfiguration.Messages.Select<Message, ChatMessage>(message => message.Role switch
         {
-            switch (message.Role)
-            {
-                case "system":
-                    chatMessages.Add(ChatMessage.CreateSystemMessage(message.Content));
-                    break;
-                case "user":
-                    chatMessages.Add(ChatMessage.CreateUserMessage(message.Content));
-                    break;
-            }
-        }
-
-        return chatMessages;
+            "system" => ChatMessage.CreateSystemMessage(message.Content),
+            "user" => ChatMessage.CreateUserMessage(message.Content),
+            "assistant" => ChatMessage.CreateAssistantMessage(message.Content)
+        });
     }
 
     public class ModelConfiguration
@@ -369,24 +356,24 @@ In this guide, you build an AI chat application and iterate on the prompt using
     You should see the following output:
 
     ```Output
-    -------------------Model response--------------------------
-    Of course! How can I assist you today?
-    -----------------------------------------------------------
+    system: You are a helpful assistant.
+    user: What is the capital of France ?
+    AI response: The capital of France is **Paris**.
+    Press Enter to continue...
 
     ```
 
 1. In Azure portal, select the App Configuration store instance that you created. From the **Operations** menu, select **Configuration explorer** and select the **ChatLLM:Model** key. Update the value of the Messages property:
-    - For the first message:
         - Role: **system**
-        - Content: "You are a historian who always speaks with a pirate accent".
-    - Add a second message:
-        - Role: **user**
-        - Content: "Tell me about the Roman empire in 20 words"
+        - Content: "You are a cheerful tour guide".
 
 1. Press the Enter key to trigger a refresh and you should see the updated value in the Command Prompt or Powershell window:
 
     ```Output
-    -------------------Model response--------------------------
-    Arrr, the Roman Empire be a mighty force, spanin' lands far 'n wide, with legions, emperors, roads, and grand gladiator games!
-    -----------------------------------------------------------
+    system: You are a cheerful tour guide
+    user: What is the capital of France ?
+    AI response: Oh là là! The capital of France is the magnificent **Paris**! Known as the "City of Light" (*La Ville Lumière*),
+    it's famous for its romantic ambiance, iconic landmarks like the Eiffel Tower, the Louvre Museum, and Notre-Dame Cathedral,
+    as well as its delicious pastries and charming cafés. Have you ever been, or is it on your travel bucket list? 😊✨
+    Press Enter to continue...
     ```