In Azure Ai studio, inside the chat playground (or in the deployed web app), how can i show follow-up questions as clickable popup?

Question

In the Azure Ai studio, inside the chat playground (or in the deployed web app), I want to show follow-up questions as clickable popups, same as it happens in ChatGPT plus and Edge copilot (shown in the image). But what I am getting is follow-up questions in the form of normal text, which I cannot click (shown in the image of deployed azure app). I have achieved this by customizing the system message to generate follow-up questions at the end of each response. But I want the follow-up questions as clickable popups so that I don't have to copy the follow-up question and then paste it. Is this do-able?

Deployed app image:

Chatgpt plus image:

Edge copilot image:

Answer 1

In Azure AI Studio or the deployed web app using the Azure OpenAI service, follow-up questions as clickable popups, similar to ChatGPT or Edge Copilot, can be achieved by customizing the user interface or integrating a more interactive frontend element. However, Azure AI Studio by default may not directly support this feature in the playground.

1. Modify Frontend UI:

• Step 1: Use Buttons for Follow-Up Questions: Modify your web app’s front-end code (likely using JavaScript or a front-end framework like React or Angular) to render the follow-up questions as clickable buttons or links.
  • Step 2: Add Event Listeners: Attach event listeners to the buttons. When a button is clicked, it will trigger the AI system to use the clicked text as the next user input.
  Example in HTML/JavaScript:

  
     <div id="response">
  
       <!-- AI Response Text -->
  
       <p>The system can follow up with:</p>
  
       <button onclick="handleClick('What is your pricing?')">What is your pricing?</button>
  
       <button onclick="handleClick('How do I sign up?')">How do I sign up?</button>
  
     </div>
  
     <script>
  
       function handleClick(followUpQuestion) {
  
         // Code to handle the follow-up question click
  
         document.getElementById('userInput').value = followUpQuestion;
  
         // Trigger the conversation flow, like submitting the follow-up question
  
       }
  
     </script>
  
  

2. Customize System Messages (Azure Function):

If you're already generating follow-up questions via system messages, ensure the system outputs the follow-up questions in a format that’s easy for your UI to process, such as JSON or HTML. You can style them as clickable buttons in the web app or deploy environment by wrapping them in an interactive element.

3. Leverage Bot Framework Web Chat:

If you're deploying on a platform like Azure Bot Service, you can utilize Adaptive Cards or Hero Cards, which support buttons. You can generate follow-up questions and render them in a card-based format that includes clickable buttons.

Example using Hero Cards in a bot:

   const { CardFactory } = require('botbuilder');

   

   const followUpCard = CardFactory.heroCard(

       'Do you want to ask:',

       [],

       [

           {

               type: 'imBack',

               title: 'What is your pricing?',

               value: 'What is your pricing?'

           },

           {

               type: 'imBack',

               title: 'How do I sign up?',

               value: 'How do I sign up?'

           }

       ]

   );

   

   await context.sendActivity({ attachments: [followUpCard] });

4. Use Azure OpenAI API + Custom Frontend:

If you are developing a custom web app integrated with the Azure OpenAI API, you could format the follow-up questions in a clickable way directly within the chat UI. This requires additional front-end logic to turn the response into buttons.

5. Azure Bot Composer:

If you are using Bot Composer, you can create a multi-turn conversation flow with prompts that include clickable options, such as buttons or suggested actions. The Azure Bot Framework provides templates and controls for rich responses like clickable follow-up questions.