How to get citations as a clickable url in Azure AI foundry model

To get citations as clickable URLs in Azure AI Foundry models, you can utilize the url property of the citation information in the chat completion response. This property holds the URL of the citation, which can be formatted as a clickable link in your application or interface.

When constructing your chat response, ensure that you include the url field for each citation. This way, when the response is rendered, the URLs will be clickable, allowing users to access the referenced documents directly.

Make sure to handle the rendering of these URLs appropriately in your front-end code to ensure they appear as clickable links.

References:

• Azure OpenAI in Azure AI Foundry Models v1 REST API reference
• Azure OpenAI in Azure AI Foundry Models REST API v1 preview reference

Hi Ayush Mishra,
This is the default behavior of the "Deploy to Web App" template. It's designed to show documents in a side panel for quick review within the app, rather than navigating the user away.

To change this to standard web link behavior. you will need to make a minor code implementation to the frontend of the web app that Azure created for you.

Recommended workaround steps:

1)Even though you deployed with "no-code," all the code is running on your App Service and you have full access to it. The easiest way to edit it is to download it. Download the entire wwwroot folder. This is your web app's code.
Alternatively, you can use the "App Service Editor (Preview)" under "Development Tools" to browse and edit the files directly in your browser, but downloading is safer for a backup.

2)The code for your chat app is based on a standard template. You need to find the specific file that renders the citation links.

1. In the code you downloaded, navigate to the frontend folder. This is usually in a subfolder like frontend or static.
2. You are looking for the file that renders the chat message. It's often a JavaScript/TypeScript file, like Citation.tsx, ChatHistory.tsx, or ChatMessage.js (the exact name may vary slightly).
3. Open that file in a code editor (like VS Code or even Notepad).
4. Search for the HTML <a> (anchor) tag that creates the citation link. It will look something like this:

      <a onClick={() => handleCitationClick(citation.url)}>
          {citation.filename}
      </a>
   

   1. The key part is the onClick handler. This is what tells the app to open the side panel.
   2. You need to replace that code with a standard HTML link that opens in a new tab. Change it to this:

            <a href={citation.url} target="_blank" rel="noopener noreferrer">
                {citation.filename}
            </a>
      

3)Redeploy Your Changes

After you've saved your file, you need to upload the new version back to your App Service.

1. If you used FTP, just re-upload the single file you changed (or the entire wwwroot folder) back to your App Service, overwriting the old one.
2. If you are using the in-browser App Service Editor, just click "Save".
3. Your App Service will automatically restart (this may take 30-60 seconds).

Helpful references:

https://learn.microsoft.com/en-us/azure/ai-foundry/openai/how-to/use-web-app
https://github.com/microsoft/sample-app-aoai-chatGPT