Chat template: PDF citation viewer (#5843)

Author: SteveSandersonMS

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor

@@ -25,8 +25,8 @@
 
         Use the search tool to find relevant information. When you do this, end your
         reply with citations in the special format, always formatted as XML:
-        <citation file='filename' page='page_number'>verbatim quote here</citation>.
-        The quote must be max 5 words, taken directly from search result text, and is the basis for why the citation is relevant.
+        <citation filename='string' page_number='number'>exact quote here</citation>.
+        The quote must be max 5 words, taken word-for-word from the search result, and is the basis for why the citation is relevant.
         Don't refer to the presence of citations; just emit these tags right at the end, with no surrounding text.
         ";
 

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor

@@ -1,12 +1,13 @@
-<div class="citation inline-flex bg-white px-3 py-2 rounded mt-4 mr-4 gap-2 text-sm min-w-48">
+@using System.Web
+<a href="@viewerUrl" target="_blank" class="citation inline-flex bg-white px-3 py-2 rounded mt-4 mr-4 gap-2 text-sm min-w-48">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
     </svg>
     <div class="flex flex-col">
         <div class="font-semibold">@File</div>
         <div>@Quote</div>
     </div>
-</div>
+</a>
 
 @code {
     [Parameter]
@@ -17,4 +18,18 @@
 
     [Parameter]
     public required string Quote { get; set; }
+
+    private string? viewerUrl;
+
+    protected override void OnParametersSet()
+    {
+        viewerUrl = null;
+
+        // If you ingest other types of content besides PDF files, construct a URL to an appropriate viewer here
+        if (File.EndsWith(".pdf"))
+        {
+            var search = Quote.Trim('.', ',', ' ', '\n', '\r', '\t', '"', '\'');
+            viewerUrl = $"pdfjs/web/viewer.html?file=/citation/{HttpUtility.UrlEncode(File)}#page={PageNumber}&search={HttpUtility.UrlEncode(search)}&phrase=true";
+        }
+    }
 }

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor.css

@@ -1,3 +1,11 @@
 .citation {
     border-bottom: 2px solid #a770de;
 }
+
+    .citation[href]:hover {
+        outline: 1px solid #865cb1;
+    }
+
+    .citation:active {
+        background-color: rgba(0,0,0,0.05);
+    }

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor

@@ -56,7 +56,7 @@ else if (Message.Role == ChatRole.Assistant)
 
 @code {
     private static readonly ConditionalWeakTable<ChatMessage, ChatMessageItem> SubscribersLookup = new();
-    private static readonly Regex CitationRegex = new(@"<citation file='(?<file>[^']*)' page='(?<page>\d*)'>(?<quote>.*?)</citation>", RegexOptions.Compiled);
+    private static readonly Regex CitationRegex = new(@"<citation filename='(?<file>[^']*)' page_number='(?<page>\d*)'>(?<quote>.*?)</citation>", RegexOptions.Compiled);
 
     private List<(string File, int? Page, string Quote)>? citations;
 

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Program.cs

@@ -16,6 +16,8 @@
 using ChatWithCustomData.Web.Services;
 using ChatWithCustomData.Web.Services.Ingestion;
 using System.ClientModel;
+using Microsoft.Extensions.FileProviders;
+using Microsoft.Extensions.FileProviders.Physical;
 #if (UseAzureAISearch)
 using Azure.Search.Documents.Indexes;
 using Microsoft.SemanticKernel.Connectors.AzureAISearch;
@@ -111,7 +113,15 @@
 app.UseHttpsRedirection();
 app.UseAntiforgery();
 
-app.MapStaticAssets();
+// Serve any file in the /Data directory for the purpose of showing citations
+// Caution: only place files in this directory that you want to be publicly accessible
+app.UseStaticFiles(new StaticFileOptions
+{
+    FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "Data")),
+    RequestPath = "/citation"
+});
+
+app.UseStaticFiles();
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/wwwroot/pdfjs/README.txt

@@ -0,0 +1,5 @@
+pdf.js version 4.10.38
+https://github.com/mozilla/pdf.js
+License: Apache-2.0
+
+To update, replace the files with an updated build from https://github.com/mozilla/pdf.js/releases